feat: fix border sizing

elibosley · elibosley · commit 04d69f7b7db2 · 2025-07-17T10:03:59.000-04:00
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -27,7 +27,8 @@
       "Bash(pnpm remove:*)",
       "WebFetch(domain:github.com)",
       "mcp__browsermcp__browser_navigate",
-      "Bash(clear)"
+      "Bash(clear)",
+      "Bash(git log:*)"
     ]
   },
   "enableAllProjectMcpServers": false
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -138,4 +138,5 @@ Enables GraphQL playground at `http://tower.local/graphql`
 
 ## Development Memories
 
-- We are using tailwind v4 we do not need a tailwind config anymore 
+- We are using tailwind v4 we do not need a tailwind config anymore 
+- always search the internet for tailwind v4 documentation when making tailwind related style changes
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/unraid-ui/package.json b/unraid-ui/package.json
@@ -63,6 +63,7 @@
     "reka-ui": "2.3.2",
     "shadcn-vue": "2.2.0",
     "tailwind-merge": "2.6.0",
+    "tw-animate-css": "^1.3.5",
     "vue-sonner": "1.3.2"
   },
   "devDependencies": {
@@ -98,7 +99,6 @@
     "rimraf": "6.0.1",
     "storybook": "9.0.17",
     "tailwindcss": "4.1.11",
-    "tailwindcss-animate": "1.0.7",
     "typescript": "5.8.3",
     "typescript-eslint": "8.37.0",
     "vite": "7.0.4",
diff --git a/unraid-ui/src/styles/globals.css b/unraid-ui/src/styles/globals.css
@@ -1,10 +1,5 @@
 @import 'tailwindcss';
-
-@source './src/components/**/*.{js,vue,ts}';
-@source './src/components/**/*.ce.{js,vue,ts}';
-@source './src/composables/**/*.{js,vue,ts}';
-@source './stories/**/*.stories.{js,ts,jsx,mdx}';
-@source './index.html';
+@import 'tw-animate-css';
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -22,6 +17,11 @@
   ::file-selector-button {
     border-color: hsl(var(--border));
   }
+  
+  /* Fix for Tailwind v4 border styles not working */
+  * {
+    --tw-border-style: solid;
+  }
 }
 
 @theme {
@@ -214,6 +214,22 @@
 
   /* Radius */
   --radius: 0.5rem;
+
+  /* Text Resizing */
+  --text-xs: 1.2rem; /* 12px at 10px base */
+  --text-sm: 1.4rem; /* 14px at 10px base */
+  --text-base: 1.6rem; /* 16px at 10px base */
+  --text-lg: 1.8rem; /* 18px at 10px base */
+  --text-xl: 2rem; /* 20px at 10px base */
+  --text-2xl: 2.4rem; /* 24px at 10px base */
+  --text-3xl: 3rem; /* 30px at 10px base */
+  --text-4xl: 3.6rem; /* 36px at 10px base */
+  --text-5xl: 4.8rem; /* 48px at 10px base */
+  --text-6xl: 6rem; /* 60px at 10px base */
+  --text-7xl: 7.2rem; /* 72px at 10px base */
+  --text-8xl: 9.6rem; /* 96px at 10px base */
+  --text-9xl: 12.8rem; /* 128px at 10px base */
+  --spacing: 0.4rem; /* 4px at 10px base */
 }
 
 @layer base {
diff --git a/web/codegen.ts b/web/codegen.ts
@@ -41,4 +41,4 @@ const config: CodegenConfig = {
   },
 };
 
-export default config;
+export default config;
diff --git a/web/components/Activation/ActivationPartnerLogoImg.vue b/web/components/Activation/ActivationPartnerLogoImg.vue
@@ -18,5 +18,5 @@ const { darkMode } = storeToRefs(useThemeStore());
     :src="partnerInfo?.partnerLogoUrl"
     class="w-72"
     :class="{ invert: darkMode && partnerInfo.hasPartnerLogo }"
-  />
+  >
 </template>
diff --git a/web/components/Activation/graphql/activationCode.query.ts b/web/components/Activation/graphql/activationCode.query.ts
@@ -38,4 +38,4 @@ export const ACTIVATION_CODE_QUERY = graphql(/* GraphQL */ `
       }
     }
   }
-`);
+`);
diff --git a/web/components/ApiKey/actionVariant.ts b/web/components/ApiKey/actionVariant.ts
@@ -27,4 +27,4 @@ export function actionVariant(action: string):
     default:
       return 'gray';
   }
-} 
+} 
diff --git a/web/components/ConnectSettings/ConnectSettings.ce.vue b/web/components/ConnectSettings/ConnectSettings.ce.vue
@@ -107,14 +107,14 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
   >
     <template v-if="connectPluginInstalled">
       <Label>Account Status:</Label>
-      <div v-html="'<unraid-auth></unraid-auth>'"></div>
+      <div v-html="'<unraid-auth></unraid-auth>'"/>
     </template>
     <Label>Download Unraid API Logs:</Label>
     <div
       v-html="
         '<unraid-download-api-logs></unraid-download-api-logs>'
       "
-    ></div>
+    />
   </div>
   <!-- auto-generated settings form -->
   <div class="mt-6 pl-3 [&_.vertical-layout]:space-y-6">
diff --git a/web/components/HeaderOsVersion.ce.vue b/web/components/HeaderOsVersion.ce.vue
@@ -90,7 +90,7 @@ const updateOsStatus = computed(() => {
         :src="'/webGui/images/UN-logotype-gradient.svg'"
         class="w-[160px] h-auto max-h-[30px] object-contain"
         alt="Unraid Logo"
-      />
+      >
     </a>
 
     <div class="flex flex-wrap justify-start gap-2">
diff --git a/web/components/Logs/SingleLogViewer.vue b/web/components/Logs/SingleLogViewer.vue
@@ -371,7 +371,7 @@ defineExpose({ refreshLogContent });
               <div
                 class="w-2 h-2 rounded-full bg-green-500 animate-pulse cursor-help"
                 aria-hidden="true"
-              ></div>
+              />
             </TooltipTrigger>
             <TooltipContent>
               <p>Watching log file</p>
@@ -439,7 +439,7 @@ defineExpose({ refreshLogContent });
         class="font-mono whitespace-pre-wrap p-4 m-0 text-xs leading-6 hljs"
         :class="{ 'theme-dark': isDarkMode, 'theme-light': !isDarkMode }"
         v-html="logContent"
-      ></pre>
+      />
     </div>
   </div>
 </template>
diff --git a/web/components/Logs/log.subscription.ts b/web/components/Logs/log.subscription.ts
@@ -8,4 +8,4 @@ export const LOG_FILE_SUBSCRIPTION = graphql(/* GraphQL */ `
       totalLines
     }
   }
-`); 
+`); 
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
@@ -188,7 +188,7 @@ const prepareToViewNotifications = () => {
                   importance = strVal === 'all' || !strVal ? undefined : (strVal as Importance);
                 }
               "
-            ></Select>
+            />
           </div>
 
           <TabsContent value="unread" class="flex-col flex-1 min-h-0">
diff --git a/web/components/RClone/RemoteItem.vue b/web/components/RClone/RemoteItem.vue
@@ -74,4 +74,4 @@ const getLinkedRemote = (remote: string | unknown): string => {
       </div>
     </div>
   </div>
-</template> 
+</template> 
diff --git a/web/components/UpdateOs/RawChangelogRenderer.vue b/web/components/UpdateOs/RawChangelogRenderer.vue
@@ -129,13 +129,13 @@ const mutatedParsedChangelog = computed(() => {
     <div v-else-if="parsedChangelogTitle" class="mb-4">
       <h1>{{ parsedChangelogTitle }}</h1>
     </div>
-    <div v-if="mutatedParsedChangelog" v-html="mutatedParsedChangelog"></div>
+    <div v-if="mutatedParsedChangelog" v-html="mutatedParsedChangelog"/>
     <div v-else-if="isLoading" class="flex flex-col items-center justify-center py-8">
-      <span class="mx-auto animate-spin border-2 border-gray-300 rounded-full w-8 h-8 border-t-unraid-red"></span>
+      <span class="mx-auto animate-spin border-2 border-gray-300 rounded-full w-8 h-8 border-t-unraid-red"/>
       <p class="ml-2">{{ props.t('Loading changelog...') }}</p>
     </div>
     <div v-else class="text-center py-8">
       <p>{{ props.t('No changelog content available') }}</p>
     </div>
   </div>
-</template> 
+</template> 
diff --git a/web/components/Wrapper/web-component-plugins.ts b/web/components/Wrapper/web-component-plugins.ts
@@ -46,4 +46,4 @@ export default function (Vue: App) {
 
   // Provide Apollo client for all web components
   Vue.provide(DefaultApolloClient, client);
-} 
+} 
diff --git a/web/composables/gql/index.ts b/web/composables/gql/index.ts
@@ -1,2 +1,2 @@
 export * from "./fragment-masking";
-export * from "./gql";
+export * from "./gql";
diff --git a/web/helpers/create-apollo-client.ts b/web/helpers/create-apollo-client.ts
@@ -93,4 +93,4 @@ const additiveLink = from([errorLink, retryLink, disableQueryLink, splitLinks]);
 export const client = new ApolloClient({
   link: additiveLink,
   cache: createApolloCache(),
-});
+});
diff --git a/web/helpers/functions.ts b/web/helpers/functions.ts
@@ -18,4 +18,4 @@ export function extractGraphQLErrorMessage(err: unknown): string {
     message = e.message;
   }
   return message;
-}
+}
diff --git a/web/helpers/urls.ts b/web/helpers/urls.ts
@@ -69,4 +69,4 @@ export {
   WEBGUI_TOOLS_UPDATE,
   SUPPORT,
   UNRAID_NET_SUPPORT,
-};
+};
diff --git a/web/package.json b/web/package.json
@@ -74,7 +74,6 @@
     "prettier": "3.6.2",
     "shadcn-nuxt": "2.2.0",
     "tailwindcss": "4.1.11",
-    "tailwindcss-animate": "1.0.7",
     "terser": "5.43.1",
     "typescript": "5.8.3",
     "vite": "7.0.4",
diff --git a/web/pages/login.vue b/web/pages/login.vue
@@ -15,7 +15,7 @@ const handleSubmit = () => {
             <path
               fill="#ffffff"
               d="M146.70000000000002 29.5H135l-3 9h-6.5L138.9 0h8l13.4 38.5h-7.1L142.6 6.9l-5.8 16.9h8.2l1.7 5.7zM29.7 0v25.4c0 8.9-5.8 13.6-14.9 13.6C5.8 39 0 34.3 0 25.4V0h6.5v25.4c0 5.2 3.2 7.9 8.2 7.9 5.2 0 8.4-2.7 8.4-7.9V0h6.6zM50.9 12v26.5h-6.5V0h6.1l17 26.5V0H74v38.5h-6.1L50.9 12zM171.3 0h6.5v38.5h-6.5V0zM222.4 24.7c0 9-5.9 13.8-15.2 13.8h-14.5V0h14.6c9.2 0 15.1 4.8 15.1 13.8v10.9zm-6.6-10.9c0-5.3-3.3-8.1-8.5-8.1h-8.1v27.1h8c5.3 0 8.6-2.8 8.6-8.1V13.8zM108.3 23.9c4.3-1.6 6.9-5.3 6.9-11.5 0-8.7-5.1-12.4-12.8-12.4H88.8v38.5h6.5V5.7h6.9c3.8 0 6.2 1.8 6.2 6.7s-2.4 6.8-6.2 6.8h-3.4l9.2 19.4h7.5l-7.2-14.7z"
-            ></path>
+            />
           </svg>
         </div>
       </div>
@@ -37,8 +37,8 @@ const handleSubmit = () => {
                 spellcheck="false"
                 autofocus
                 required
-              />
-              <input name="password" type="password" placeholder="<?=_('Password')?>" required />
+              >
+              <input name="password" type="password" placeholder="<?=_('Password')?>" required >
             </p>
             <p>
               <button type="submit" class="button button--small">Login</button>
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
@@ -27,38 +27,38 @@ const { serverState } = storeToRefs(serverStore);
         </div>
         <unraid-user-profile :server="JSON.stringify(serverState)" />
       </header>
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
 
       <h3 class="text-lg font-semibold font-mono">ConnectSettingsCe</h3>
       <ConnectSettingsCe />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">DownloadApiLogsCe</h3>
       <unraid-download-api-logs />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">AuthCe</h3>
       <unraid-auth />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">WanIpCheckCe</h3>
       <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">HeaderOsVersion</h3>
       <unraid-header-os-version />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">UpdateOsCe</h3>
       <unraid-update-os />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">DowngradeOsCe</h3>
       <unraid-downgrade-os restore-release-date="2022-10-10" restore-version="6.11.2" />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">RegistrationCe</h3>
       <unraid-registration />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">ModalsCe</h3>
       <!-- uncomment to test modals <unraid-modals />-->
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">SSOSignInButtonCe</h3>
       <unraid-sso-button />
-      <hr class="border-black dark:border-white" />
+      <hr class="border-black dark:border-white" >
       <h3 class="text-lg font-semibold font-mono">ApiKeyManagerCe</h3>
       <unraid-api-key-manager />
     </div>
diff --git a/web/plugins/apollo.ts b/web/plugins/apollo.ts
@@ -4,4 +4,4 @@ import { client } from '~/helpers/create-apollo-client';
 
 export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.provide(DefaultApolloClient, client);
-}); 
+}); 
diff --git a/web/store/globalPinia.ts b/web/store/globalPinia.ts
@@ -4,4 +4,4 @@ import { createPinia, setActivePinia } from 'pinia';
 export const globalPinia = createPinia();
 
 // Set it as the active pinia instance
-setActivePinia(globalPinia); 
+setActivePinia(globalPinia); 
diff --git a/web/tailwind-shadcn.config.ts b/web/tailwind-shadcn.config.ts
diff --git a/web/types/server.ts b/web/types/server.ts

Original file line number	Diff line number	Diff line change
@@ -38,4 +38,4 @@ export const ACTIVATION_CODE_QUERY = graphql(/* GraphQL */ `
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`	`}`
`41`		-`);
	`41`	+`);
Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,4 @@ export function actionVariant(action: string):`
`27`	`27`	`default:`
`28`	`28`	`return 'gray';`
`29`	`29`	`}`
`30`		`-}`
	`30`	`+}`