fix: user profile component responsiveness

web/__test__/components/HeaderOsVersion.test.ts

@@ -6,7 +6,6 @@ import { nextTick } from 'vue';
 import { setActivePinia } from 'pinia';
 import { mount } from '@vue/test-utils';
 
-import { Badge } from '@unraid/ui';
 import { createTestingPinia } from '@pinia/testing';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -82,14 +81,6 @@ vi.mock('vue-i18n', () => ({
   }),
 }));
 
-vi.mock('@unraid/ui', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@unraid/ui')>();
-  return {
-    ...actual,
-    Badge: actual.Badge,
-  };
-});
-
 describe('HeaderOsVersion', () => {
   let wrapper: VueWrapper<unknown>;
   let testingPinia: TestingPinia;
@@ -118,7 +109,6 @@ describe('HeaderOsVersion', () => {
     wrapper = mount(HeaderOsVersion, {
       global: {
         plugins: [testingPinia],
-        components: { Badge },
       },
     });
   });
@@ -128,16 +118,13 @@ describe('HeaderOsVersion', () => {
     vi.restoreAllMocks();
   });
 
-  it('renders OS version badge with correct link and no update status initially', () => {
-    const versionBadgeLink = wrapper.find('a[title*="release notes"]');
-
-    expect(versionBadgeLink.exists()).toBe(true);
-    expect(versionBadgeLink.attributes('href')).toBe(`${testMockReleaseNotesUrl}6.12.0`);
+  it('renders OS version link with correct URL and no update status initially', () => {
+    const versionLink = wrapper.find('a[title*="release notes"]');
 
-    const badge = versionBadgeLink.findComponent(Badge);
+    expect(versionLink.exists()).toBe(true);
+    expect(versionLink.attributes('href')).toBe(`${testMockReleaseNotesUrl}6.12.0`);
 
-    expect(badge.exists()).toBe(true);
-    expect(badge.text()).toContain('6.12.0');
+    expect(versionLink.text()).toContain('6.12.0');
     expect(findUpdateStatusComponent()).toBeNull();
   });
 

web/components/HeaderOsVersion.ce.vue

@@ -78,7 +78,7 @@ const updateOsStatus = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col gap-y-2">
     <a
       :href="unraidLogoHeaderLink.href"
       :title="unraidLogoHeaderLink.title"
@@ -88,28 +88,21 @@ const updateOsStatus = computed(() => {
     >
       <img
         :src="'/webGui/images/UN-logotype-gradient.svg'"
-        class="w-[160px] h-auto max-h-[30px] ml-[10px] mt-[25px] mb-[8px] object-contain"
+        class="w-[160px] h-auto max-h-[30px] object-contain"
         alt="Unraid Logo"
       />
     </a>
 
-    <div class="flex flex-row justify-start gap-x-4px">
+    <div class="flex flex-wrap justify-start gap-2">
       <a
-        class="group leading-none"
+        class="text-xs xs:text-sm flex flex-row items-center gap-x-1 font-semibold text-header-text-secondary hover:text-orange-dark focus:text-orange-dark hover:underline focus:underline leading-none"
         :title="t('View release notes')"
         :href="getReleaseNotesUrl(osVersion).toString()"
         target="_blank"
         rel="noopener"
       >
-        <Badge
-          variant="custom"
-          :icon="InformationCircleIcon"
-          icon-styles="text-header-text-secondary"
-          size="sm"
-          class="text-header-text-secondary group-hover:text-orange-dark group-focus:text-orange-dark group-hover:underline group-focus:underline"
-        >
-          {{ osVersion }}
-        </Badge>
+        <InformationCircleIcon class="fill-current w-3 h-3 xs:w-4 xs:h-4 flex-shrink-0" />
+        {{ osVersion }}
       </a>
       <component
         :is="updateOsStatus.href ? 'a' : 'button'"

web/components/UserProfile.ce.vue

@@ -100,7 +100,7 @@ onMounted(() => {
 <template>
   <div
     id="UserProfile"
-    class="text-foreground relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px"
+    class="text-foreground relative z-20 flex flex-col h-full gap-y-1"
   >
     <div
       v-if="bannerGradient"
@@ -109,11 +109,11 @@ onMounted(() => {
     />
 
     <div
-      class="text-xs text-header-text-secondary text-right font-semibold leading-normal relative z-10 flex flex-col items-end justify-end gap-x-4px xs:flex-row xs:items-baseline xs:gap-x-12px"
+      class="text-xs text-header-text-secondary text-right font-semibold leading-normal relative z-10 flex flex-wrap items-baseline justify-end gap-x-1 xs:flex-row xs:gap-x-4"
     >
-      <UpcUptimeExpire :t="t" />
+      <UpcUptimeExpire :as="'span'" :t="t" class="text-12px" />
       <span class="hidden xs:block">&bull;</span>
-      <UpcServerState :t="t" />
+      <UpcServerState :t="t" class="text-12px" />
     </div>
 
     <div class="relative z-10 flex flex-row items-center justify-end gap-x-16px h-full">

web/components/UserProfile/DropdownTrigger.vue

@@ -20,7 +20,7 @@ import { useUpdateOsStore } from '~/store/updateOs';
 const props = defineProps<{ t: ComposerTranslation }>();
 
 const { errors } = storeToRefs(useErrorsStore());
-const { rebootType, state, stateData } = storeToRefs(useServerStore());
+const { connectPluginInstalled, rebootType, state, stateData } = storeToRefs(useServerStore());
 const { available: osUpdateAvailable } = storeToRefs(useUpdateOsStore());
 
 const showErrorIcon = computed(() => errors.value.length || stateData.value.error);
@@ -79,6 +79,6 @@ const title = computed((): string => {
 
     <Bars3Icon class="w-20px" />
 
-    <BrandAvatar />
+    <BrandAvatar v-if="connectPluginInstalled" />
   </button>
 </template>

web/components/UserProfile/UptimeExpire.vue

@@ -9,12 +9,14 @@ import { useServerStore } from '~/store/server';
 export interface Props {
   forExpire?: boolean;
   shortText?: boolean;
+  as?: 'p' | 'span';
   t: ComposerTranslation;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   forExpire: false,
   shortText: false,
+  as: 'p',
 });
 
 const serverStore = useServerStore();
@@ -60,7 +62,7 @@ const output = computed(() => {
 </script>
 
 <template>
-  <p :title="output.title">
+  <component :is="as" :title="output.title">
     {{ output.text }}
-  </p>
+  </component>
 </template>