fix: inject Tailwind CSS into client entry point

.claude/settings.local.json

@@ -16,7 +16,6 @@
       "mcp__ide__getDiagnostics",
       "Bash(pnpm --filter \"*connect*\" test connect-status-writer.service.spec)",
       "Bash(pnpm storybook:*)",
-      "Bash(rm:*)",
       "Bash(pnpm add:*)",
       "Bash(pnpm install:*)",
       "Bash(pkill:*)",
@@ -33,7 +32,13 @@
       "Bash(pnpm --filter @unraid/ui build)",
       "Bash(pnpm --filter @unraid/web build)",
       "Bash(python3:*)",
-      "Bash(pnpm tailwind:build:*)"
+      "Bash(pnpm tailwind:build:*)",
+      "WebFetch(domain:erangrin.github.io)",
+      "Bash(pnpm clean:*)",
+      "Bash(pnpm validate:css:*)",
+      "Bash(node:*)",
+      "Bash(rm:*)",
+      "Bash(pnpm run:*)"
     ]
   },
   "enableAllProjectMcpServers": false

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php

@@ -39,6 +39,7 @@ public function getManifestContents(string $manifestPath): array
         return $contents ? json_decode($contents, true) : [];
     }
 
+
     private function getRichComponentsFile(): string
     {
         $manifestFiles = $this->findManifestFiles('manifest.json');

web/assets/main.css

@@ -12,6 +12,12 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Breakpoints */
+  --breakpoint-xs: 30rem;
+  --breakpoint-2xl: 100rem;
+  --breakpoint-3xl: 120rem;
+
+  /* Colors */
   --color-primary-50: #fff7ed;
   --color-primary-100: #ffedd5;
   --color-primary-200: #fed7aa;

web/components/Activation/WelcomeModal.ce.vue

@@ -101,57 +101,3 @@ watchEffect(() => {
     </Dialog>
   </div>
 </template>
-
-<style>
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-
-.unraid_mark_2,
-.unraid_mark_4 {
-  animation: mark_2 1.5s ease infinite;
-}
-.unraid_mark_3 {
-  animation: mark_3 1.5s ease infinite;
-}
-.unraid_mark_6,
-.unraid_mark_8 {
-  animation: mark_6 1.5s ease infinite;
-}
-.unraid_mark_7 {
-  animation: mark_7 1.5s ease infinite;
-}
-
-@keyframes mark_2 {
-  50% {
-    transform: translateY(-40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_3 {
-  50% {
-    transform: translateY(-62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_6 {
-  50% {
-    transform: translateY(40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_7 {
-  50% {
-    transform: translateY(62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>

web/components/ApiKeyPage.ce.vue

@@ -6,8 +6,3 @@ import ApiKeyManager from '~/components/ApiKey/ApiKeyManager.vue';
     <ApiKeyManager />
   </div>
 </template>
-<style>
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/Auth.ce.vue

@@ -30,9 +30,3 @@ const { authAction, stateData } = storeToRefs(serverStore);
     </span>
   </div>
 </template>
-
-<style>
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/CallbackHandler.ce.vue

@@ -14,9 +14,3 @@ onBeforeMount(() => {
     <slot />
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/ColorSwitcher.ce.vue

@@ -74,9 +74,3 @@ const items = [
     <Switch id="banner" v-model:checked="form.banner" />
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/ConnectSettings/ConnectSettings.ce.vue

@@ -148,8 +148,3 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
     </div>
   </div>
 </template>
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '../../assets/main.css';
-</style>

web/components/DevSettings.vue

@@ -23,9 +23,3 @@ import { CogIcon } from '@heroicons/vue/24/solid';
 
 
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/DowngradeOs.ce.vue

@@ -77,9 +77,3 @@ onBeforeMount(() => {
     </PageContainer>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/DownloadApiLogs.ce.vue

@@ -71,9 +71,3 @@ const downloadUrl = computed(() => {
     </span>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/DummyServerSwitcher.vue

@@ -24,9 +24,3 @@ const items = [
     <Select v-model="selector" :items="items" placeholder="Select an initial state" />
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/HeaderOsVersion.ce.vue

@@ -127,10 +127,3 @@ const updateOsStatus = computed(() => {
     </div>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-
-@import '~/assets/main.css';
-</style>

web/components/Logs/LogViewer.ce.vue

@@ -191,9 +191,3 @@ watch(selectedLogFile, (newValue) => {
     </div>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/Modals.ce.vue

@@ -31,57 +31,3 @@ const { modalVisible: apiKeyModalVisible } = storeToRefs(useApiKeyStore());
     <ApiKeyCreate :open="apiKeyModalVisible" :t="t" />
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-
-.unraid_mark_2,
-.unraid_mark_4 {
-  animation: mark_2 1.5s ease infinite;
-}
-.unraid_mark_3 {
-  animation: mark_3 1.5s ease infinite;
-}
-.unraid_mark_6,
-.unraid_mark_8 {
-  animation: mark_6 1.5s ease infinite;
-}
-.unraid_mark_7 {
-  animation: mark_7 1.5s ease infinite;
-}
-
-@keyframes mark_2 {
-  50% {
-    transform: translateY(-40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_3 {
-  50% {
-    transform: translateY(-62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_6 {
-  50% {
-    transform: translateY(40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_7 {
-  50% {
-    transform: translateY(62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>

web/components/RClone/RCloneConfig.vue

@@ -238,8 +238,3 @@ provide('isSubmitting', isCreating);
     </div>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-</style>

web/components/Registration.ce.vue

@@ -324,9 +324,3 @@ const items = computed((): RegistrationItemProps[] => {
     </PageContainer>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/SsoButton.ce.vue

@@ -150,9 +150,3 @@ const navigateToExternalSSOUrl = () => {
     </template>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/ThemeSwitcher.ce.vue

@@ -91,9 +91,3 @@ const handleThemeChange = (event: Event) => {
     </select>
   </div>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-</style>

web/components/UpdateOs.ce.vue

@@ -73,57 +73,3 @@ onBeforeMount(() => {
       <UpdateOsThirdPartyDrivers v-if="rebootType === 'thirdPartyDriversDownloading'" :t="t" />
     </PageContainer>
 </template>
-
-<style >
-/* Import unraid-ui globals first */
-@import '@unraid/ui/styles';
-@import '~/assets/main.css';
-
-.unraid_mark_2,
-.unraid_mark_4 {
-  animation: mark_2 1.5s ease infinite;
-}
-.unraid_mark_3 {
-  animation: mark_3 1.5s ease infinite;
-}
-.unraid_mark_6,
-.unraid_mark_8 {
-  animation: mark_6 1.5s ease infinite;
-}
-.unraid_mark_7 {
-  animation: mark_7 1.5s ease infinite;
-}
-
-@keyframes mark_2 {
-  50% {
-    transform: translateY(-40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_3 {
-  50% {
-    transform: translateY(-62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_6 {
-  50% {
-    transform: translateY(40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_7 {
-  50% {
-    transform: translateY(62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>

web/components/UpdateOs/ChangelogModal.vue

@@ -9,7 +9,7 @@ import {
   KeyIcon,
   ServerStackIcon,
 } from '@heroicons/vue/24/solid';
-import { BrandButton, BrandLoading } from '@unraid/ui';
+import { BrandButton, BrandLoading, cn } from '@unraid/ui';
 import { allowedDocsOriginRegex, allowedDocsUrlRegex } from '~/helpers/urls';
 
 import type { ComposerTranslation } from 'vue-i18n';
@@ -176,8 +176,8 @@ watch(darkMode, () => {
     </template>
 
     <template #footer>
-      <div class="flex flex-col-reverse xs:flex-row justify-between gap-3 md:gap-4">
-        <div class="flex flex-col-reverse xs:flex-row xs:justify-start gap-3 md:gap-4">
+      <div :class="cn('flex flex-col-reverse xs:!flex-row justify-between gap-3 md:gap-4')">
+        <div :class="cn('flex flex-col-reverse xs:!flex-row xs:justify-start gap-3 md:gap-4')">
           <!-- Back to changelog button (when navigated away) -->
           <BrandButton
             v-if="hasNavigated && docsChangelogUrl"