order form

server/static/layout.css

@@ -71,36 +71,16 @@ main {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
     gap: var(--space-md);
 }
 
-@media (max-width: 48em) {
-    .topnav {
-        padding: 0 var(--space-sm);
-        gap: var(--space-xs);
-    }
-
-    .topnav > nav > a span:not(.material-symbols-outlined) {
-        display: none;
-    }
-
-    .topnav > .cta span:not(.material-symbols-outlined) {
-        display: none;
-    }
-
-    .topnav > .cta {
-        width: 2.25rem;
-        height: 2.25rem;
-        padding: 0;
-        border-radius: 50%;
-        justify-content: center;
-    }
-
-    .main-content {
-        padding: var(--space-sm);
-    }
-
-    .topnav > h1 {
-        font-size: 1rem;
+#order {
+    display: grid;
+    grid-template-columns: auto 20rem;
+    grid-template-rows: auto auto auto 1fr;
+    > aside {
+        grid-column: 2;
+        grid-row: span;
     }
 }

server/templates/order.templ

@@ -9,9 +9,8 @@ import (
 )
 
 templ OrderForm(dto dto.OrderPage) {
-	<form method="post" class="split-pane order-form" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(dto.BlockedDates) } data-state={ orderStateJSON(dto.Order) }>
+	<form method="post" id="order" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(dto.BlockedDates) } data-state={ orderStateJSON(dto.Order) }>
 		<input type="hidden" name="id" value={ dto.Order.ID }/>
-		<div class="order-left">
 		<section class="card">
 			<header>
 				<h2>
@@ -111,9 +110,7 @@ templ OrderForm(dto dto.OrderPage) {
 				</ul>
 			</div>
 		</section>
-		</div>
-		<aside class="order-aside">
-			<section class="card">
+		<aside class="card">
 			<header>
 				<h2>
 					<span class="material-symbols-outlined">receipt_long</span>
@@ -184,7 +181,6 @@ templ OrderForm(dto dto.OrderPage) {
 					Finalizuj zamówienie
 				</button>
 			</div>
-			</section>
 		</aside>
 	</form>
 	@SpecialCakeOverlay(dto.Tags)