fix: Fixes some layout issues with footer and sidebar, makes size column in duct-sizing views to be a fixed width, so the tables line up properly.

Public/css/output.css

@@ -4224,6 +4224,9 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-\[100vh\] {
+    top: 100vh;
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -4284,6 +4287,12 @@
       }
     }
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .join {
     display: inline-flex;
     align-items: stretch;
@@ -5368,12 +5377,6 @@
       }
     }
   }
-  .-my-2 {
-    margin-block: calc(var(--spacing) * -2);
-  }
-  .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
   .my-1\.5 {
     margin-block: calc(var(--spacing) * 1.5);
   }
@@ -5595,9 +5598,6 @@
   .me-6 {
     margin-inline-end: calc(var(--spacing) * 6);
   }
-  .me-8 {
-    margin-inline-end: calc(var(--spacing) * 8);
-  }
   .me-\[140px\] {
     margin-inline-end: 140px;
   }
@@ -5728,12 +5728,18 @@
       font-weight: 600;
     }
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-auto {
+    margin-bottom: auto;
+  }
   .carousel-item {
     @layer daisyui.l1.l2.l3 {
       box-sizing: content-box;
@@ -6592,6 +6598,15 @@
       width: calc(var(--size-selector, 0.25rem) * 4);
     }
   }
+  .w-\[300px\] {
+    width: 300px;
+  }
+  .w-\[310px\] {
+    width: 310px;
+  }
+  .w-\[330px\] {
+    width: 330px;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -6601,6 +6616,9 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
+  .min-w-\[300px\] {
+    min-width: 300px;
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -6812,9 +6830,6 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-baseline {
-    align-items: baseline;
-  }
   .items-center {
     align-items: center;
   }
@@ -6836,6 +6851,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .justify-items-end {
+    justify-items: end;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -6900,15 +6918,9 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
-  .gap-y-6 {
-    row-gap: calc(var(--spacing) * 6);
-  }
   .overflow-auto {
     overflow: auto;
   }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
   .timeline-box {
     @layer daisyui.l1.l2.l3 {
       border: var(--border) solid;
@@ -7194,14 +7206,6 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -7319,9 +7323,6 @@
       border-color: currentColor;
     }
   }
-  .border-base-100 {
-    border-color: var(--color-base-100);
-  }
   .border-error {
     border-color: var(--color-error);
   }
@@ -7331,9 +7332,6 @@
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-secondary {
-    border-color: var(--color-secondary);
-  }
   .menu-active {
     :where(:not(ul, details, .menu-title, .btn))& {
       @layer daisyui.l1.l2 {
@@ -7488,14 +7486,11 @@
   .bg-base-100 {
     background-color: var(--color-base-100);
   }
-  .bg-base-200 {
-    background-color: var(--color-base-200);
-  }
   .bg-base-300 {
     background-color: var(--color-base-300);
   }
-  .bg-primary {
+  .bg-error {
-    background-color: var(--color-primary);
+    background-color: var(--color-error);
   }
   .bg-red-500 {
     background-color: var(--color-red-500);
@@ -7920,9 +7915,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -7952,9 +7944,6 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -8590,12 +8579,6 @@
   .text-primary {
     color: var(--color-primary);
   }
-  .text-primary-content {
-    color: var(--color-primary-content);
-  }
-  .text-secondary-content {
-    color: var(--color-secondary-content);
-  }
   .text-slate-900 {
     color: var(--color-slate-900);
   }
@@ -9482,13 +9465,6 @@
       border-color: var(--color-red-500);
     }
   }
-  .hover\:rounded-lg {
-    &:hover {
-      @media (hover: hover) {
-        border-radius: var(--radius-lg);
-      }
-    }
-  }
   .hover\:bg-neutral {
     &:hover {
       @media (hover: hover) {
@@ -9510,16 +9486,6 @@
       }
     }
   }
-  .hover\:btn-success {
-    &:hover {
-      @media (hover: hover) {
-        @layer daisyui.l1.l2.l3 {
-          --btn-color: var(--color-success);
-          --btn-fg: var(--color-success-content);
-        }
-      }
-    }
-  }
   .focus\:outline {
     &:focus {
       outline-style: var(--tw-outline-style);
@@ -9614,16 +9580,6 @@
       }
     }
   }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-  .\32 xl\:table-cell {
-    @media (width >= 96rem) {
-      display: table-cell;
-    }
-  }
   .is-drawer-close\:mx-auto {
     &:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
       margin-inline: auto;

Sources/ViewController/Views/DuctSizing/RoomsTable.swift

@@ -21,7 +21,7 @@ extension DuctSizingView {
             th { "BTU" }
             th { "CFM" }
             th { "Velocity" }
-            th { "Size" }
+            th(.class("w-[330px]")) { "Size" }
           }
         }
         tbody {
@@ -101,7 +101,7 @@ extension DuctSizingView {
         td { Number(room.velocity) }
 
         td {
-          div(.class("grid grid-cols-3 gap-2")) {
+          div(.class("grid grid-cols-3 gap-2 w-[330px]")) {
 
             div(.class("label")) { "Calculated" }
             div(.class("flex justify-center")) {

Sources/ViewController/Views/DuctSizing/TrunksTable.swift

@@ -22,7 +22,7 @@ extension DuctSizingView {
             th { "Associated Supplies" }
             th { "Dsn CFM" }
             th { "Velocity" }
-            th { "Size" }
+            th(.class("w-[330px]")) { "Size" }
           }
         }
         tbody {
@@ -65,7 +65,7 @@ extension DuctSizingView {
           Number(trunk.velocity)
         }
         td {
-          div(.class("grid grid-cols-3 gap-4")) {
+          div(.class("grid grid-cols-3 gap-2 w-[330px]")) {
             div(.class("label")) { "Calculated" }
             div(.class("flex justify-center")) {
               Badge(number: trunk.roundSize, digits: 1)
@@ -97,8 +97,9 @@ extension DuctSizingView {
                 .attributes(.class("badge-info"))
               }
             }
-            div(.class("flex justify-end")) {
+            div(.class("flex justify-end items-end")) {
               div(.class("join")) {
+                if trunk.width != nil {
                   TrashButton()
                     .attributes(.class("join-item btn-ghost"))
                     .attributes(
@@ -106,6 +107,7 @@ extension DuctSizingView {
                       .hx.target("closest tr"),
                       .hx.swap(.outerHTML)
                     )
+                }
 
                 EditButton()
                   .attributes(

Sources/ViewController/Views/MainPage.swift

@@ -81,11 +81,12 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
   }
 
   public var body: some HTML {
-    div(.class("flex flex-col min-h-screen min-w-full")) {
+    div(.class("flex flex-col min-h-screen min-w-full justify-between")) {
-      main(.class("grow")) {
+      main(.class("flex flex-col min-h-screen min-w-full grow mb-auto")) {
         inner
       }
 
+      div(.class("bottom-0 left-0 bg-error")) {
         if displayFooter {
           footer(
             .class(
@@ -103,6 +104,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
           }
         }
       }
+    }
     .attributes(.data("theme", value: theme?.rawValue ?? "default"), when: theme != nil)
   }
 }

Sources/ViewController/Views/Project/ProjectView.swift

@@ -31,12 +31,10 @@ struct ProjectView<Inner: HTML>: HTML, Sendable where Inner: Sendable {
   }
 
   var body: some HTML {
-    div(.class("h-screen w-full")) {
+    div(.class("drawer lg:drawer-open h-full")) {
-
-      div(.class("drawer lg:drawer-open")) {
       input(.id("my-drawer-1"), .type(.checkbox), .class("drawer-toggle"))
 
-        div(.class("drawer-content")) {
+      div(.class("drawer-content overflow-auto")) {
         Navbar(sidebarToggle: true)
         div(.class("p-4")) {
           inner
@@ -51,7 +49,6 @@ struct ProjectView<Inner: HTML>: HTML, Sendable where Inner: Sendable {
       )
     }
   }
-  }
 
 }
 
@@ -65,7 +62,7 @@ extension ProjectView {
 
     var body: some HTML {
 
-      div(.class("drawer-side is-drawer-close:overflow-visible")) {
+      div(.class("drawer-side is-drawer-close:overflow-visible grow")) {
         label(
           .for("my-drawer-1"), .init(name: "aria-label", value: "close sidebar"),
           .class("drawer-overlay")
@@ -74,13 +71,13 @@ extension ProjectView {
         div(
           .class(
             """
-            flex min-h-full flex-col items-start bg-base-300 text-base-content
+            flex grow h-full flex-col items-start bg-base-300 text-base-content
             is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]
             """
           )
         ) {
 
-          ul(.class("w-full")) {
+          ul(.class("w-full grow")) {
 
             li(.class("flex w-full")) {
               row(