FIX - compact Companies Glass subnavigation

frontend/src/ui/controls/SkySegmented.test.ts

@@ -102,6 +102,42 @@ describe('SkySegmented navigation', () => {
     )
   })
 
+  it('keeps text-only Glass navigation compact with 44px targets', async () => {
+    const html = await renderToString(
+      createSSRApp({
+        render: () =>
+          h(
+            SkySegmented,
+            {
+              activeIndex: 1,
+              ariaLabel: 'Availability',
+              compact: true,
+              itemCount: 3,
+              navigation: true,
+            },
+            {
+              default: () =>
+                ['Available', 'Busy', 'Closed'].map((label, index) =>
+                  h(SkySegmentedButton, { active: index === 1 }, () => label),
+                ),
+            },
+          ),
+      }),
+    )
+
+    expect(html).toContain('sky-segmented--compact')
+    expect(html).toContain('width:calc(33.3333% - 5.3333px)')
+    expect(controls).toMatch(
+      /\.sky-glass\.sky-segmented--navigation\.sky-segmented--compact\s*\{[^}]*height:\s*48px[^}]*min-height:\s*48px[^}]*padding-block:\s*2px/s,
+    )
+    expect(controls).toMatch(
+      /\.sky-segmented--navigation\.sky-segmented--compact \.sky-segmented-button\s*\{[^}]*height:\s*var\(--sky-touch-target, 44px\)[^}]*font-size:\s*15px[^}]*font-weight:\s*500/s,
+    )
+    expect(controls).toMatch(
+      /\.sky-segmented--compact \.sky-segmented__highlight\s*\{[^}]*top:\s*2px[^}]*bottom:\s*2px/s,
+    )
+  })
+
   it('lets subnavbar search controls fill the available Konsta row', () => {
     expect(controls).toMatch(
       /\.sky-searchbar\s*\{[^}]*width:\s*100%[^}]*flex:\s*1 1 auto/s,

frontend/src/ui/controls/SkySegmented.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
   defineProps<{
     activeIndex?: number
     ariaLabel?: string
+    compact?: boolean
     glassHighlight?: boolean
     itemCount?: number
     navigation?: boolean
@@ -21,6 +22,7 @@ const props = withDefaults(
   {
     activeIndex: 0,
     ariaLabel: '',
+    compact: false,
     glassHighlight: true,
     itemCount: 0,
     navigation: undefined,
@@ -65,6 +67,7 @@ const indicatorStyle = computed<CSSProperties | undefined>(() => {
     class="sky-segmented"
     :class="{
       'sky-segmented--navigation': isNavigation,
+      'sky-segmented--compact': compact,
       'sky-segmented--outline': outline,
       'sky-segmented--raised': raised,
       'sky-segmented--rounded': rounded,