Migrations/bookorbit
1
0
Fork 0
mirror of https://github.com/bookorbit/bookorbit.git synced 2026-11-03 00:11:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): keep the sidebar dock inside a narrow sidebar

Browse Source 
The dock's six 32px controls need 13.25rem, but the sidebar can be dragged
down to 224px, so the language and settings buttons spilled past its edge.
Below that width the buttons now shrink to 28px with a 2px gap. The spacer
that added a stray gap is replaced by a right-aligned group; the rail and
phone sheet are unchanged.

Closes #1873
This commit is contained in:
neon
2026-10-25 21:24:18 +00:00
parent 587ffeb3ed
commit 834da8c954
2 changed files with 91 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar/SidebarDock.vue
+12 -5
View File
@@ -42,11 +42,16 @@ const themeStore = useThemeStore()
const iconRadiusClass = computed(() => (themeStore.radius === 'sharp' ? 'rounded-none' : 'rounded-full'))
const controlClass = computed(() => [
'h-8 w-8 border border-(--shell-accent-line) text-foreground transition-colors duration-150 hover:bg-(--shell-accent-wash)',
'size-(--dock-control) border border-(--shell-accent-line) text-foreground transition-colors duration-150 hover:bg-(--shell-accent-wash)',
iconRadiusClass.value,
])
/** The full set of controls needs 13.25rem, and the sidebar can be dragged narrower than that, so the dock tightens its buttons instead of spilling out. */
const rowClass = computed(() => [
'flex items-center gap-(--dock-gap) [--dock-control:2rem] [--dock-gap:0.25rem] group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-1.5',
!props.isRail && '@max-[13.25rem]:[--dock-control:1.75rem] @max-[13.25rem]:[--dock-gap:0.125rem]',
])
const avatarClass = computed(() => [
'flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden border border-(--shell-accent-line) bg-(--shell-accent-tint) transition-colors duration-150 hover:bg-(--shell-accent-wash) focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
'flex size-(--dock-control) shrink-0 items-center justify-center overflow-hidden border border-(--shell-accent-line) bg-(--shell-accent-tint) transition-colors duration-150 hover:bg-(--shell-accent-wash) focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
iconRadiusClass.value,
])
@@ -94,10 +99,11 @@ function handleLogout() {
<template>
<div
class="flex shrink-0 items-center gap-1 border-t border-sidebar-border px-2 py-[7px] group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-1.5 group-data-[collapsible=icon]:py-2"
class="@container shrink-0 border-t border-sidebar-border px-2 py-[7px] group-data-[collapsible=icon]:py-2"
ref="dockRef"
data-testid="sidebar-dock"
>
<div :class="rowClass">
<DropdownMenu v-if="user">
<DropdownMenuTrigger as-child>
<button type="button" :class="avatarClass" :aria-label="t('components.appHeader.account')">
@@ -128,8 +134,7 @@ function handleLogout() {
</DropdownMenuContent>
</DropdownMenu>
<span class="min-w-0 flex-1 group-data-[collapsible=icon]:hidden" aria-hidden="true" />
<div class="ms-auto flex items-center gap-(--dock-gap) group-data-[collapsible=icon]:contents">
<NotificationSheet v-if="canAccessNotifications" :icon-radius-class="iconRadiusClass" />
<Tooltip>
@@ -186,4 +191,6 @@ function handleLogout() {
<TooltipContent :side="tooltipSide">{{ t('components.appHeader.settings') }}</TooltipContent>
</Tooltip>
</div>
</div>
</div>
</template>
client/src/features/notifications/components/NotificationSheet.vue
+1 -1
View File
@@ -51,7 +51,7 @@ function handleLoadMore() {
<Button
variant="ghost"
size="icon"
class="relative h-8 w-8 border border-(--shell-accent-line) text-foreground transition-colors duration-150 hover:bg-(--shell-accent-wash)"
class="relative size-(--dock-control,2rem) border border-(--shell-accent-line) text-foreground transition-colors duration-150 hover:bg-(--shell-accent-wash)"
:class="iconRadiusClass"
:aria-label="t('notifications.title')"
>