From 8e1d0e9a9fc9f2be3c0e9bce31d030d88bef1705 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sat, 27 Jun 2026 09:44:25 +0100 Subject: [PATCH] fix(dotcom): hide section header when sidebar has a single section (#9416) In order to avoid a redundant group header when the sidebar file list only has one time-based group (e.g. only "Today", or only "Older"), this PR hides the solo section's title via CSS. Each section renders as a `sidebarFileSectionWrapper` element directly inside the file list container, and empty groups render as `null` rather than empty nodes. So "only one section is present" is exactly `:only-child`, and a single CSS rule hides that section's header. As soon as a second section appears, all headers return. Closes #9412 ### Change type - [x] `improvement` ### Test plan 1. Open tldraw.com with an account whose files all fall into a single time group (e.g. all created today). 2. Confirm the sidebar shows the file list with no "Today" header. 3. Create or open an older file so a second group appears. 4. Confirm both group headers ("Today", "Older", etc.) are now shown. ### Release notes - Hide the sidebar file-group header when only one group is present. ### Code changes | Section | LOC change | | ------- | ---------- | | Apps | +6 / -0 | --- .../client/src/tla/components/TlaSidebar/sidebar.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css b/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css index 05b79668d0d6..c1dcec1a0422 100644 --- a/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css +++ b/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css @@ -425,6 +425,12 @@ margin-bottom: 28px; } +/* When a section is the only one rendered (e.g. just "Today" or just "Older"), + its header is redundant, so hide it. */ +.sidebarFileSectionWrapper:only-child .sidebarFileSectionTitle { + display: none; +} + .sidebarFileSection { position: relative; background: var(--tla-color-sidebar);