Changing width of the sidebar in the collapsed state with `collapsible="icon"`?

[td2thinh]

Hello, according to the docs here, the width of the sidebar component can be changed by setting the inline style of ShadcnSidebarProvider or changing the constants in utils.ts and the layout of the components will be changed accordingly. However this seems to only be the case for the sidebar component itself in the expanded state but not in the collapse state?

Here is the default 3rem width and img tag with "w-4 h-4":

When set to 5.75rem width with "w-6 h-6", only the expanded state actually allow this width:

It seems like the icons are forced to have a certain width to fit the 3rem layout and changing the width of the collapsed sidebar component doesnt change these layout and styling values. My sidebar is defined like so:

  <Sidebar
apsible="icon"
    style="background-color: #fff9e1"
    @mouseenter="setOpen(true)"
    @mouseleave="setOpen(false)"
  >
    <SidebarContent>
  dcnSidebarGroup>
    dcnSidebarGroupContent>
      dcnSidebarMenu>
        dcnSidebarMenuItem
          r="item in navigationItems"
              :key="item.name"
            >
              <SidebarMenuButton asChild>
      NuxtLink
                  :to="item.path"
                  active-class="active-item-bg"
                >
                  <img
                    :src="item.src"
                    :alt="`${item.name} icon`"
                    class="h-6 w-6 flex-shrink-0"
                  />
                  <span>{{ item.name }}</span>
                </NuxtLink>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>