scrollable containers

internal/server/static/style.css

@@ -26,7 +26,6 @@ body {
   color: var(--text-color);
   background-color: var(--background-color);
   display: flex;
-  min-height: 100vh;
   width: 100%;
   line-height: 1.6;
 }
@@ -112,7 +111,7 @@ nav>a:hover::after {
   padding: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100dvh;
   overflow-x: hidden;
 }
 
@@ -140,7 +139,9 @@ main {
   padding: 2rem;
   display: flex;
   flex-direction: column;
+  height: 100%;
   gap: 1.5rem;
+  overflow: hidden;
 }
 
 /* Search form */
@@ -313,11 +314,21 @@ tr a {
   flex-direction: column;
 }
 
+.order>div {
+  flex-basis: 0;
+  flex-shrink: 0;
+}
+
 .order-contents>*:first-child,
 .order-contents>*:last-child {
   flex-grow: 0;
 }
 
+.scrollable {
+  overflow-y: auto;
+  min-height: 0;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .search-container {

internal/server/templates/order.gohtml

@@ -43,7 +43,7 @@
                         <input type="number" name="paid" min="0" value="{{.Paid}}">
                     </label>
                 </div>
-                <div>
+                <div class="scrollable">
                     <h2>Dodane Ciasta</h2>
                     <ul id="basket">
                     </ul>
@@ -52,7 +52,7 @@
             </div>
             {{end}}
             {{with .Catalogue}}
-                <div>
+                <div class="scrollable">
                     <h2>Katalog</h2>
                     <ul>
                         {{range .}}

internal/server/templates/orders.gohtml

@@ -15,7 +15,7 @@ Zamówienia
             <input type="date" value="{{.Last}}" name="to">
         </label>
     </form>
-    <div id="results-table">
+    <div id="results-table" class="scrollable">
         {{template "orders-table" .Orders}}
     </div>
 </main>