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

fix: 1px border misalignment between sidebar and chat headers

Browse Source 
Standardize all app headers on h-14 (fixed 56px) instead of py-3
(padding-driven 57px) so border-bottom lines align at panel seams.
This commit is contained in:
Jannis Braun
2026-03-12 23:00:05 +01:00
parent 63e616ab0a
commit 7166be0507
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/layout/MainContent.tsx
+6 -6
View File
@@ -108,7 +108,7 @@ export function MainContent() {
ref={voiceContainerRef}
className={`flex-1 flex flex-col bg-surface-base min-w-0 group/voice relative ${voiceFullscreen ? 'h-screen' : ''}`}
>
<div className={`py-3 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base transition-opacity duration-300 ${voiceFullscreen ? 'opacity-0 hover:opacity-100' : ''}`}>
<div className={`h-14 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base transition-opacity duration-300 ${voiceFullscreen ? 'opacity-0 hover:opacity-100' : ''}`}>
<div className="flex items-center gap-[10px]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
@@ -160,7 +160,7 @@ export function MainContent() {
</button>
</div>
)}
<div className="py-3 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 z-10 bg-surface-chat">
<div className="h-14 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 z-10 bg-surface-chat">
<div className="flex items-center gap-[10px] min-w-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
<path d="M12.5 2A6.5 6.5 0 0 0 6 8.5c0 1.82.75 3.47 1.95 4.65A10.02 10.02 0 0 0 2 22h2c0-4.42 3.58-8 8-8 .35 0 .69.03 1.03.07A6.49 6.49 0 0 0 19 8.5 6.5 6.5 0 0 0 12.5 2Zm0 11A4.5 4.5 0 1 1 17 8.5a4.5 4.5 0 0 1-4.5 4.5Z" />
@@ -237,7 +237,7 @@ export function MainContent() {
if (!currentChannelId || !channel) {
return (
<div className="flex-1 flex flex-col bg-surface-chat relative">
<div className="py-3 px-5 flex items-center justify-between border-b border-border-hard">
<div className="h-14 px-5 flex items-center justify-between border-b border-border-hard">
<span className="text-txt-tertiary">Select a channel</span>
<div className="flex items-center gap-1 flex-shrink-0">
<MemberListToggleButton />
@@ -256,7 +256,7 @@ export function MainContent() {
if (!isInThisChannel) {
return (
<div className="flex-1 flex flex-col bg-surface-base">
<div className="py-3 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base">
<div className="h-14 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base">
<div className="flex items-center gap-[10px]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
<path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46Z" />
@@ -289,7 +289,7 @@ export function MainContent() {
ref={voiceContainerRef}
className={`flex-1 flex flex-col bg-surface-base min-w-0 group/voice relative ${voiceFullscreen ? 'h-screen' : ''}`}
>
<div className={`py-3 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base transition-opacity duration-300 ${voiceFullscreen ? 'opacity-0 hover:opacity-100' : ''}`}>
<div className={`h-14 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 bg-surface-base transition-opacity duration-300 ${voiceFullscreen ? 'opacity-0 hover:opacity-100' : ''}`}>
<div className="flex items-center gap-[10px]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
<path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46Z" />
@@ -325,7 +325,7 @@ export function MainContent() {
return (
<div className="flex-1 flex flex-col bg-surface-chat min-w-0 relative">
<div className="py-3 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 z-10 bg-surface-chat">
<div className="h-14 px-5 flex items-center justify-between border-b border-border-hard flex-shrink-0 z-10 bg-surface-chat">
<div className="flex items-center gap-[10px] min-w-0">
<span className="text-[20px] font-medium text-txt-tertiary flex-shrink-0 leading-none">#</span>
<span className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate leading-tight">{channel.name}</span>