FIX - compact Companies Glass subnavigation

frontend/src/ui/controls.css

@@ -1660,6 +1660,27 @@ label.sky-list-item__row {
   transition-duration: 0ms;
 }
 
+.sky-glass.sky-segmented--navigation.sky-segmented--compact {
+  height: 48px;
+  min-height: 48px;
+  padding-block: 2px;
+}
+
+.sky-segmented--navigation.sky-segmented--compact .sky-segmented-button {
+  height: var(--sky-touch-target, 44px);
+  min-height: var(--sky-touch-target, 44px);
+  flex-direction: row;
+  gap: 0;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.sky-segmented--compact .sky-segmented__highlight {
+  top: 2px;
+  bottom: 2px;
+}
+
 .sky-segmented__highlight {
   position: absolute;
   z-index: 0;

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,

frontend/src/views/apps/AppStoreApp.contract.test.ts

@@ -6,6 +6,10 @@ const source = readFileSync(
   new URL('./AppStoreApp.vue', import.meta.url),
   'utf8',
 )
+const navigationSource = source.slice(
+  source.indexOf('<SkyPillNavigation'),
+  source.indexOf('</SkyPillNavigation>') + '</SkyPillNavigation>'.length,
+)
 
 describe('AppStoreApp Sky navigation contract', () => {
   it('uses only the first-party Sky UI surface', () => {
@@ -32,6 +36,8 @@ describe('AppStoreApp Sky navigation contract', () => {
     expect(source).toContain(':item-count="tabs.length"')
     expect(source).toContain('<SkySegmentedButton')
     expect(source).toContain(':active="tab === item.id"')
+    expect(navigationSource).toContain('class="app-store-navigation__item"')
+    expect(navigationSource).not.toContain('compact')
   })
 
   it('keeps one scroll owner and accessible 44px app actions', () => {

frontend/src/views/apps/CompaniesApp.navigation.contract.test.ts

@@ -31,6 +31,7 @@ describe('CompaniesApp Sky pill navigation contract', () => {
     expect(source).toContain(':data-active-tab="activeTab"')
     expect(source).toContain(':item-count="3"')
     expect(navigationSource.match(/<SkySegmentedButton\b/g)).toHaveLength(3)
+    expect(navigationSource).not.toContain('compact')
   })
 
   it('keeps directory, requests and work actions with unread badges', () => {
@@ -50,6 +51,7 @@ describe('CompaniesApp Sky pill navigation contract', () => {
 
   it('uses the shared sliding Glass system for the request-state filter', () => {
     expect(requestFilterSource).toContain('<SkySegmented')
+    expect(requestFilterSource).toContain('compact')
     expect(requestFilterSource).toContain('navigation')
     expect(requestFilterSource).toContain(':item-count="2"')
     expect(requestFilterSource).toContain(
@@ -60,4 +62,23 @@ describe('CompaniesApp Sky pill navigation contract', () => {
     )
     expect(requestFilterSource.match(/<SkySegmentedButton\b/g)).toHaveLength(2)
   })
+
+  it('uses compact sliding Glass for both availability controls', () => {
+    expect(source.match(/class="availability-segmented"/g)).toHaveLength(2)
+    expect(
+      source.match(
+        /:active-index="availabilityValues\.indexOf\(workCompany\.availability\)"/g,
+      ),
+    ).toHaveLength(2)
+    expect(
+      source.match(/:item-count="availabilityValues\.length"/g),
+    ).toHaveLength(2)
+    expect(source.match(/\s+compact\s+navigation/g)).toHaveLength(3)
+    expect(source).toContain(
+      ':aria-label="phone.t(\'Apps.companies.work.publicAvailability\')"',
+    )
+    expect(source).toContain(
+      ':aria-label="phone.t(\'Apps.companies.manager.availability\')"',
+    )
+  })
 })

frontend/src/views/apps/CompaniesApp.vue

@@ -1201,7 +1201,9 @@ onBeforeUnmount(() => {
           :active-index="requestList === 'open' ? 0 : 1"
           :aria-label="phone.t('Apps.companies.tabs.requests')"
           :item-count="2"
+          compact
           navigation
+          rounded
         >
           <SkySegmentedButton
             :active="requestList === 'open'"
@@ -1358,7 +1360,15 @@ onBeforeUnmount(() => {
           <SkyBlockTitle>{{
             phone.t('Apps.companies.work.publicAvailability')
           }}</SkyBlockTitle>
-          <SkySegmented class="availability-segmented">
+          <SkySegmented
+            class="availability-segmented"
+            :active-index="availabilityValues.indexOf(workCompany.availability)"
+            :aria-label="phone.t('Apps.companies.work.publicAvailability')"
+            :item-count="availabilityValues.length"
+            compact
+            navigation
+            rounded
+          >
             <SkySegmentedButton
               v-for="availability in availabilityValues"
               :key="availability"
@@ -1773,7 +1783,15 @@ onBeforeUnmount(() => {
       <SkyBlockTitle>{{
         phone.t('Apps.companies.manager.availability')
       }}</SkyBlockTitle>
-      <SkySegmented class="availability-segmented">
+      <SkySegmented
+        class="availability-segmented"
+        :active-index="availabilityValues.indexOf(workCompany.availability)"
+        :aria-label="phone.t('Apps.companies.manager.availability')"
+        :item-count="availabilityValues.length"
+        compact
+        navigation
+        rounded
+      >
         <SkySegmentedButton
           v-for="availability in availabilityValues"
           :key="availability"