Maintenance: Desktop View - Adjust sidebar button sizes and state.

Co-authored-by: Benjamin Scharf <bs@zammad.com>

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -92,6 +92,8 @@ const sizeClasses = computed(() => {
 })
 
 const paddingClasses = computed(() => {
+  if (props.size === 'large' && props.icon) return ['p-2']
+
   if (props.icon) return ['p-1']
 
   switch (props.size) {
@@ -166,7 +168,7 @@ const iconSizeClass = computed(() => {
 
       <CommonIcon
         v-if="icon"
-        class="pointer-events-none shrink-0"
+        class="pointer-events-none block shrink-0"
         decorative
         :size="iconSizeClass"
         :name="icon"

app/frontend/apps/desktop/components/PageNavigation/PageNavigation.vue

@@ -37,12 +37,12 @@ const router = useRouter()
             >
               <CommonButton
                 v-if="collapsed"
-                class="text-neutral-400 hover:outline-blue-900"
+                class="flex-shrink-0 text-neutral-400 hover:outline-blue-900"
                 :class="{
                   '!bg-blue-800 !text-white':
                     router.currentRoute.value.path === route.path,
                 }"
-                size="medium"
+                size="large"
                 variant="neutral"
                 :icon="route.meta.icon"
                 @click="router.push(route.path)"
@@ -55,7 +55,8 @@ const router = useRouter()
                 internal
               >
                 <CommonLabel
-                  class="gap-2 text-current"
+                  class="gap-2 !text-sm text-current"
+                  size="large"
                   :prefix-icon="route.meta.icon"
                 >
                   {{ $t(route.meta.title) }}

app/frontend/apps/desktop/components/UserTaskbarTabs/UserTaskbarTabs.vue

@@ -209,7 +209,7 @@ const { popover, popoverTarget, toggle, isOpen: popoverIsOpen } = usePopover()
           ref="popoverTarget"
           class="text-neutral-400 hover:outline-blue-900"
           icon="card-list"
-          size="medium"
+          size="large"
           variant="neutral"
           :aria-controls="
             popoverIsOpen ? 'user-taskbar-tabs-popover' : undefined

app/frontend/apps/desktop/components/layout/LayoutSidebar.vue

@@ -111,7 +111,7 @@ const collapseButtonClass = computed(() => {
     <CommonButton
       v-if="iconCollapsed && isCollapsed"
       class="mx-auto"
-      size="medium"
+      size="large"
       data-test-id="action-button"
       variant="neutral"
       :icon="iconCollapsed"

app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/MenuContainer/AddMenu/AddMenu.vue

@@ -22,8 +22,8 @@ const defaultItem = computed(() =>
     :default-icon="defaultItem?.icon"
     :default-button-variant="defaultItem?.variant"
     :placement="collapsedState ? 'start' : 'arrowStart'"
-    :link-size="collapsedState ? 'tiny' : 'small'"
-    :button-size="collapsedState ? 'medium' : 'large'"
+    link-size="small"
+    button-size="large"
     :actions="menuItems"
   />
 </template>

app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/MenuContainer/AdminMenu/AdminMenu.vue

@@ -23,7 +23,7 @@ const defaultItem = computed(() =>
     :default-button-variant="defaultItem?.variant"
     :hide-arrow="collapsedState"
     :placement="collapsedState ? 'start' : 'arrowStart'"
-    :link-size="collapsedState ? 'tiny' : 'small'"
-    :button-size="collapsedState ? 'medium' : 'large'"
+    link-size="small"
+    button-size="large"
   />
 </template>

app/frontend/apps/desktop/composables/useResizeGridColumns.ts

@@ -9,7 +9,7 @@ export const DEFAULT_START_SIDEBAR_WIDTH = 260
 export const DEFAULT_END_SIDEBAR_WIDTH = 360
 export const MINIMUM_START_SIDEBAR_WIDTH = 200
 export const MINIMUM_END_SIDEBAR_WIDTH = 300
-export const SIDEBAR_COLLAPSED_WIDTH = 48
+export const SIDEBAR_COLLAPSED_WIDTH = 56
 
 export const useResizeGridColumns = (
   storageKey?: string,

app/frontend/apps/desktop/pages/dashboard/__tests__/left-sidebar.spec.ts

@@ -62,7 +62,7 @@ describe('Left sidebar', () => {
       await view.events.click(collapseButton)
 
       expect(aside.parentElement).toHaveStyle({
-        gridTemplateColumns: '48px 1fr',
+        gridTemplateColumns: '56px 1fr',
       })
 
       const expandButton = getByRole(aside, 'button', {
@@ -87,7 +87,7 @@ describe('Left sidebar', () => {
       const aside = view.getByRole('complementary')
 
       expect(aside.parentElement).toHaveStyle({
-        gridTemplateColumns: '48px 1fr',
+        gridTemplateColumns: '56px 1fr',
       })
     })
 

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleBubble/ArticleBubbleActionList.vue

@@ -145,6 +145,7 @@ const actions = computed(() => {
         class="!py-0.5 px-1 !text-xs"
         :class="[buttonVariantClassExtension]"
         :prefix-icon="action.icon"
+        size="large"
         @click="action.onClick"
         >{{ $t(action.label) }}
       </CommonButton>
@@ -155,7 +156,7 @@ const actions = computed(() => {
       :no-padded-default-button="false"
       no-small-rounding-default-button
       :entity="{ ticket, article }"
-      button-size="small"
+      button-size="medium"
       :placement="position === 'left' ? 'arrowStart' : 'arrowEnd'"
       :default-button-variant="
         position === 'left' ? 'neutral-dark' : 'neutral-light'

app/frontend/apps/desktop/pages/ticket/components/TicketSidebar.vue

@@ -32,7 +32,7 @@ const maybeToggleAndSwitchSidebar = (newSidebar: string) => {
   <div class="flex h-full justify-end">
     <div v-show="!isCollapsed" id="ticketSidebar" class="flex grow flex-col" />
     <div
-      class="flex max-w-12 flex-col items-center gap-2.5 border-neutral-100 px-2.5 py-3 transition-[border] dark:border-gray-900"
+      class="flex flex-col items-center gap-2.5 border-neutral-100 px-2.5 py-3 transition-[border] dark:border-gray-900"
       :class="{ 'border-s': !isCollapsed }"
     >
       <component