From e087eb3de61a2e5e94462c63439e58e607b89e13 Mon Sep 17 00:00:00 2001
From: mco-system <michael.costa@mcos.nc>
Date: Tue, 11 Apr 2023 20:38:44 +1100
Subject: [PATCH] fix: portrait mode for mobile

---
 src/thsf/static/css/planning.css | 64 +++++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/thsf/static/css/planning.css b/src/thsf/static/css/planning.css
index c6ade5b..fb16acc 100644
--- a/src/thsf/static/css/planning.css
+++ b/src/thsf/static/css/planning.css
@@ -8,6 +8,27 @@
     margin: 0.3em 0;
     width: 20em;
   }
+  .slot_info .details {
+    visibility: hidden;
+    font-weight: bold;
+    background-color: var(--main-color);
+    color: var(--alt-main-color);
+    text-align: left;
+    padding: 1em;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 1s;
+    transform: translateX(-2em) translateY(102%);
+    width: 27.5em;
+    overflow-y: auto;
+    border-style: solid;
+    border-color: var(--alt-main-color);
+    border-width: 1px;
+  }
 }
 
 @media screen and (max-width: 44em) {
@@ -20,6 +41,27 @@
     margin: 0.3em 0;
     width: 21em;
   }
+  .slot_info .details {
+    visibility: hidden;
+    font-weight: bold;
+    background-color: var(--main-color);
+    color: var(--alt-main-color);
+    text-align: left;
+    padding: 1em;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 1s;
+    transform: translateX(-2em) translateY(102%);
+    width: 28em;
+    overflow-y: auto;
+    border-style: solid;
+    border-color: var(--alt-main-color);
+    border-width: 1px;
+  }
 }
 
 .slot_info,
@@ -135,28 +177,6 @@
   position: relative;
 }
 
-.slot_info .details {
-  visibility: hidden;
-  font-weight: bold;
-  background-color: var(--main-color);
-  color: var(--alt-main-color);
-  text-align: left;
-  padding: 1em;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  transition: opacity 1s;
-  transform: translateX(-2em) translateY(102%);
-  width: 28em;
-  overflow-y: auto;
-  border-style: solid;
-  border-color: var(--alt-main-color);
-  border-width: 1px;
-}
-
 .slot_info .details > .description {
   margin-top: 1em;
 }