From 77cfc07ddab05bfdd3cabb3373f9fe60f74af177 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Thu, 4 Sep 2025 14:36:25 -0400
Subject: [PATCH] refactor: enhance CSS structure with @layer for component
 styles (#1660)

- Introduced @layer directive to ensure base styles have lower priority
than Tailwind utilities.
- Organized CSS resets for box-sizing, figures, headings, paragraphs,
and unordered lists under a single @layer base block for improved
maintainability.

These changes streamline the CSS structure and enhance compatibility
with Tailwind CSS utilities.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- Style
- Wrapped core resets in a base style layer, adjusting cascade with
utility classes.
  - Applied global box-sizing within the base layer.
  - Consolidated heading and paragraph resets into the layer.
- Added a reset for unordered lists to remove default bullets and
padding.
  - Retained the logo figure reset within the layer.
- Updated formatting and header comments to reflect the layering
approach.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 @tailwind-shared/unraid-theme.css        |  21 ++++
 unraid-ui/src/forms/ObjectArrayField.vue |   4 +-
 web/assets/main.css                      | 125 ++++++++++++-----------
 web/components/ApiKey/ApiKeyCreate.vue   |   2 +-
 web/components/ApiKeyAuthorize.ce.vue    |   2 +-
 5 files changed, 93 insertions(+), 61 deletions(-)

diff --git a/@tailwind-shared/unraid-theme.css b/@tailwind-shared/unraid-theme.css
index e3bebc2cf..a2c1acc34 100644
--- a/@tailwind-shared/unraid-theme.css
+++ b/@tailwind-shared/unraid-theme.css
@@ -167,6 +167,27 @@
   --max-width-800px: 800px;
   --max-width-1024px: 1024px;
 
+  /* Container sizes adjusted for 10px base font size (1.6x scale) */
+  --container-xs: 32rem;
+  --container-sm: 38.4rem;
+  --container-md: 44.8rem;
+  --container-lg: 51.2rem;
+  --container-xl: 57.6rem;
+  --container-2xl: 67.2rem;
+  --container-3xl: 76.8rem;
+  --container-4xl: 89.6rem;
+  --container-5xl: 102.4rem;
+  --container-6xl: 115.2rem;
+  --container-7xl: 128rem;
+  
+  /* Extended width scale for max-w-* utilities */
+  --width-5xl: 102.4rem;
+  --width-6xl: 115.2rem;
+  --width-7xl: 128rem;
+  --width-8xl: 140.8rem;
+  --width-9xl: 153.6rem;
+  --width-10xl: 166.4rem;
+
   /* Animations */
   --animate-mark-2: mark-2 1.5s ease infinite;
   --animate-mark-3: mark-3 1.5s ease infinite;
diff --git a/unraid-ui/src/forms/ObjectArrayField.vue b/unraid-ui/src/forms/ObjectArrayField.vue
index a06f636f0..e9eabd99e 100644
--- a/unraid-ui/src/forms/ObjectArrayField.vue
+++ b/unraid-ui/src/forms/ObjectArrayField.vue
@@ -241,7 +241,9 @@ const updateItem = (index: number, newValue: unknown) => {
     </Tabs>
 
     <div v-else class="border-muted rounded-lg border-2 border-dashed py-8 text-center">
-      <p class="text-muted-foreground mb-4">No {{ itemTypeName.toLowerCase() }}s configured</p>
+      <p class="text-muted-foreground mb-4 text-center">
+        No {{ itemTypeName.toLowerCase() }}s configured
+      </p>
       <Button variant="outline" size="md" :disabled="!control.enabled" @click="addItem">
         <Plus class="mr-2 h-4 w-4" />
         Add First {{ itemTypeName }}
diff --git a/web/assets/main.css b/web/assets/main.css
index 1b5af2589..76b1d37e2 100644
--- a/web/assets/main.css
+++ b/web/assets/main.css
@@ -17,65 +17,74 @@
 
 /* 
  * Minimal styles for our components
- * Only essential styles to ensure components work properly
+ * Using @layer to ensure these have lower priority than Tailwind utilities
  */
 
-/* Box-sizing for proper layout */
-.unapi *,
-.unapi *::before,
-.unapi *::after {
-  box-sizing: border-box;
-}
-
-/* Reset figure element for logo */
-.unapi figure {
-  margin: 0;
-  padding: 0;
-}
-
-/* Reset heading elements - only margin/padding */
-.unapi h1,
-.unapi h2,
-.unapi h3,
-.unapi h4,
-.unapi h5 {
-  margin: 0;
-  padding: 0;
-}
-
-/* Reset paragraph element */
-.unapi p {
-  margin: 0;
-  padding: 0;
-}
-
-/* Reset toggle/switch button backgrounds */
-button[role="switch"],
-button[role="switch"][data-state="checked"],
-button[role="switch"][data-state="unchecked"] {
-  background-color: transparent !important;
-  background: transparent !important;
-  border: 1px solid #ccc !important;
-}
-
-/* Style for checked state */
-button[role="switch"][data-state="checked"] {
-  background-color: #ff8c2f !important; /* Unraid orange */
-}
-
-/* Style for unchecked state */
-button[role="switch"][data-state="unchecked"] {
-  background-color: #e5e5e5 !important;
-}
-
-/* Dark mode toggle styles */
-.dark button[role="switch"][data-state="unchecked"] {
-  background-color: #333 !important;
-  border-color: #555 !important;
-}
-
-/* Toggle thumb/handle */
-button[role="switch"] span {
-  background-color: white !important;
+@layer base {
+  /* Box-sizing for proper layout */
+  .unapi *,
+  .unapi *::before,
+  .unapi *::after {
+    box-sizing: border-box;
+  }
+
+  /* Reset figure element for logo */
+  .unapi figure {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Reset heading elements - only margin/padding */
+  .unapi h1,
+  .unapi h2,
+  .unapi h3,
+  .unapi h4,
+  .unapi h5 {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Reset paragraph element */
+  .unapi p {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Reset UL styles to prevent default browser styling */
+  .unapi ul {
+    padding-inline-start: 0;
+    list-style-type: none;
+  }
+
+  /* Reset toggle/switch button backgrounds */
+  .unapi button[role="switch"],
+  .unapi button[role="switch"][data-state="checked"],
+  .unapi button[role="switch"][data-state="unchecked"] {
+    background-color: transparent;
+    background: transparent;
+    border: 1px solid #ccc;
+  }
+
+  /* Style for checked state */
+  .unapi button[role="switch"][data-state="checked"] {
+    background-color: #ff8c2f; /* Unraid orange */
+  }
+
+  /* Style for unchecked state */
+  .unapi button[role="switch"][data-state="unchecked"] {
+    background-color: #e5e5e5;
+  }
+
+  /* Dark mode toggle styles */
+  .unapi.dark button[role="switch"][data-state="unchecked"],
+  .dark .unapi button[role="switch"][data-state="unchecked"] {
+    background-color: #333;
+    border-color: #555;
+  }
+
+  /* Toggle thumb/handle */
+  .unapi button[role="switch"] span {
+    background-color: white;
+  }
 }
 
diff --git a/web/components/ApiKey/ApiKeyCreate.vue b/web/components/ApiKey/ApiKeyCreate.vue
index 0e57e180d..9e481ca1e 100644
--- a/web/components/ApiKey/ApiKeyCreate.vue
+++ b/web/components/ApiKey/ApiKeyCreate.vue
@@ -417,7 +417,7 @@ const copyApiKey = async () => {
     :open="props.open"
     sheet-side="bottom"
     :sheet-class="'h-[100vh] flex flex-col'"
-    :dialog-class="'max-w-4xl max-h-[90vh] overflow-hidden'"
+    :dialog-class="'max-w-3xl max-h-[90vh] overflow-hidden'"
     :show-close-button="true"
     @update:open="
       (v) => {
diff --git a/web/components/ApiKeyAuthorize.ce.vue b/web/components/ApiKeyAuthorize.ce.vue
index 31434659d..f488fdc3b 100644
--- a/web/components/ApiKeyAuthorize.ce.vue
+++ b/web/components/ApiKeyAuthorize.ce.vue
@@ -113,7 +113,7 @@ const returnToApp = () => {
 </script>
 
 <template>
-  <div class="w-full max-w-4xl mx-auto p-6">
+  <div class="w-full max-w-3xl mx-auto p-6">
     <!-- Success state -->
     <div v-if="showSuccess && createdApiKey" class="w-full bg-background rounded-lg shadow-sm border border-muted">
       <!-- Header -->