From c2cf10e35db5906f1bfbbaac75a6daed6bb06360 Mon Sep 17 00:00:00 2001 From: scheinriese Date: Mon, 27 Apr 2026 23:33:21 +0200 Subject: [PATCH] refactor: unify page-icon vertical alignment across all icon types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The page-title icon container used `.flex.self-start` and relied on each icon type's own intrinsic baseline (font glyph for emoji, SVG bottom anchor for tabler, etc.), with `margin-top: 8px` and `pb-[1.5px]` band-aids compensating for one type at a time. Replaced with a single flex-center 38×38 button rule, scoped to `.ls-page-title .ls-page-icon`, so every type centers on the same visual axis. Drops the per-type pixel overrides, the mobile-specific `:size 28` (mobile font is unchanged from desktop, so the override was a band-aid), and the inline `1lh` style. Bumps the icon-to-title gap from `gap-2` to `gap-3` (12px) for breathing room. Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/block.cljs | 18 ++++------ src/main/frontend/components/block.css | 45 +++++++++++++------------ src/main/frontend/components/page.css | 7 ++++ 3 files changed, 36 insertions(+), 34 deletions(-) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 1f60106ed3..16605d4011 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -3188,7 +3188,7 @@ (when (ldb/property? block) {:type :tabler-icon :id "letter-p"})))] - [:div.ls-page-icon.flex.self-start + [:div.ls-page-icon.flex.items-center (icon-component/icon-picker icon {:on-chosen (fn [_e icon] (if icon @@ -3222,18 +3222,12 @@ :page-title (:block/title block) :preview-target-db-id (:db/id block) :button-opts (when (:page-title? config) + ;; Drop shui's default sizing/padding so the + ;; CSS rule on .ls-page-title .ls-page-icon + ;; button (38×38 flex-center) takes effect. {:size nil - :class "!p-0.5 !h-auto !w-auto"}) - :icon-props {:size (cond - (and (util/mobile?) (:page-title? config)) 28 - (:page-title? config) 38 - :else 20) - :style {:width "1lh" - :height "1lh" - :font-size (cond - (and (util/mobile?) (:page-title? config)) 24 - (:page-title? config) 38 - :else 18)}}})])))] + :class "!p-0"}) + :icon-props {:size (if (:page-title? config) 38 20)}})])))] [:div.ls-block.swipe-item (cond-> {:id (str "ls-block-" diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index d122b7b5a3..26277bc56e 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -1141,18 +1141,33 @@ html.is-mac { color: var(--rx-gray-09); } -.ls-page-title .ls-page-icon svg, .ls-page-title .ls-page-icon button { +/* Page-title icon container: vertically center the trigger button so the + icon optically aligns with the title text. The previous `.self-start` + on this element top-aligned the icon, which left every type relying on + its own intrinsic baseline (emoji on font baseline, SVG on bottom + anchor, etc.) — visible as cross-type misalignment when the hover + preview swapped types mid-row. */ +.ls-page-title .ls-page-icon { + display: flex; + align-items: center; +} + +/* Trigger button: fixed-size flex-center box. All icon types (emoji, + tabler, text, avatar, image, image-placeholder) render at :size 38 + inside this box, so flex-centering puts every type's visual centroid + at the box midpoint — uniform vertical anchor regardless of the + element's intrinsic baseline. */ +.ls-page-title .ls-page-icon button { + display: inline-flex; + align-items: center; + justify-content: center; width: 38px; height: 38px; } -/* Image icons in page title - fill the button like avatars do */ -.ls-page-title .ls-page-icon .image-icon { - width: 2rem !important; /* 32px, matching avatar size */ - height: 2rem !important; - display: flex; - align-items: center; - justify-content: center; +/* Per-type fixups: avatar fallback font size and image asset fill. */ +.ls-page-title .ls-page-icon .ui__avatar span { + font-size: 16px; } .ls-page-title .ls-page-icon .image-icon img { @@ -1161,16 +1176,6 @@ html.is-mac { object-fit: contain; } -/* Scale up avatars in page title context */ -.ls-page-title .ls-page-icon .ui__avatar { - width: 38px; - height: 38px; -} - -.ls-page-title .ls-page-icon .ui__avatar span { - font-size: 16px; -} - .ls-page-title .positioned-properties.block-left svg, .ls-page-title .positioned-properties.block-right svg { width: 24px; @@ -1212,10 +1217,6 @@ html.is-mac { } } -.ls-page-title .ls-page-icon button { - margin-top: 8px; -} - .ls-page-title .block-tags { @apply relative min-h-full; } diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index afe6eb7c33..8545cd0b3e 100644 --- a/src/main/frontend/components/page.css +++ b/src/main/frontend/components/page.css @@ -68,6 +68,13 @@ .block-main-container { @apply gap-2; } + /* Icon-to-title spacing in the page-title row. The base + `.block-main-content` is `gap-2` (8px) for regular blocks; the + page title's icon is bigger (38px box) and benefits from more + breathing room — bump to `gap-3` (12px) just here. */ + .block-main-content { + @apply gap-3; + } } .edit-input {