fix: portrait mode for mobile

src/thsf/static/css/planning.css

@@ -1,4 +1,17 @@
-.slot {
+@media screen and (min-width: 45em) {
+  .slot {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+    margin: 0.3em 0;
+    width: 20em;
+  }
+}
+
+@media screen and (max-width: 44em) {
+  .slot {
     display: flex;
     flex: 1;
     justify-content: center;
@@ -6,6 +19,7 @@
     flex-direction: row;
     margin: 0.3em 0;
     width: 21em;
+  }
 }
 
 .slot_info,

src/thsf/static/css/wrappers.css

@@ -29,9 +29,9 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 2em;
+    gap: 1.4em;
     background-color: var(--main-bg-color);
-    width: 100vw;
+    width: 40em;
     transform: translateZ(2);
   }
   .content {
@@ -70,15 +70,7 @@
     width: 21em;
     /* background-color: green; */
   }
-  .center_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 21em;
-    /* background-color: blue; */
-  }
+  .center_wrapper ,
   .header_wrapper {
     display: flex;
     flex-direction: column;