devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases 1 Wiki Activity

fix: ChannelSidebar header height aligned with MainContent headers

Browse Source 
Replace fixed h-12 (48px) with py-3 + min-h-8 padding pattern to match
MainContent's 57px header height (12+32+12+1), fixing the 9px border
misalignment between sidebar and content headers.
This commit is contained in:
Jannis Braun
2026-03-12 05:13:02 +01:00
parent 6457e4d90c
commit 5f765b33c3
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/layout/ChannelSidebar.tsx
+5 -5
View File
@@ -392,8 +392,8 @@ export function ChannelSidebar() {
return ( return (
<> <>
<div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard"> <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard">
<div className="h-12 px-[10px] flex items-center border-b border-border-hard z-10"> <div className="py-3 px-[10px] flex items-center border-b border-border-hard z-10">
<button className="flex-1 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base transition-colors"> <button className="flex-1 min-h-8 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base transition-colors">
Find or start a conversation Find or start a conversation
</button> </button>
</div> </div>
@@ -576,10 +576,10 @@ export function ChannelSidebar() {
<> <>
<div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard"> <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard">
{/* Space header */} {/* Space header */}
<div className="h-12 flex items-center border-b border-border-hard z-10 group/header"> <div className="py-3 flex items-stretch border-b border-border-hard z-10 group/header">
<button <button
onClick={() => openModal('spaceSettings')} onClick={() => openModal('spaceSettings')}
className="flex-1 h-full px-4 flex items-center justify-between hover:bg-interactive-hover transition-colors min-w-0" className="flex-1 min-h-8 px-4 flex items-center justify-between hover:bg-interactive-hover transition-colors min-w-0"
> >
<div className="min-w-0"> <div className="min-w-0">
<span className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate leading-tight block">{space.name}</span> <span className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate leading-tight block">{space.name}</span>
@@ -596,7 +596,7 @@ export function ChannelSidebar() {
{canCreateInvite && ( {canCreateInvite && (
<button <button
onClick={() => openModal('invite')} onClick={() => openModal('invite')}
className="w-10 h-full flex items-center justify-center text-txt-tertiary hover:text-txt-primary hover:bg-interactive-hover transition-all flex-shrink-0" className="w-10 min-h-8 flex items-center justify-center text-txt-tertiary hover:text-txt-primary hover:bg-interactive-hover transition-all flex-shrink-0"
title="Invite People" title="Invite People"
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">