clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-28 22:49:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(picker): tighten horizontal inset of topbars and avatar customize band

Browse Source 
- `.text-picker-back` and `.asset-picker-tabrow` left padding 14px → 12px
  so the `< Back` chevron lines up with the icon-picker tabs
  (`.tabs-section` uses `px-3`), eliminating the prior 2px misalignment
  when switching modes via `< Back`. Right side stays at 14px.
- `.avatar-customize-zone` symmetric padding 18px → 14px, pulling the
  avatar preview, banner text, and Edit affordance inward and matching
  the topbar's right inset above. Inner content width 352px (was 344px).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-22 12:18:37 +02:00
parent 2e8ba67855
commit db5e76e311
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/frontend/components/icon.css
View File

@@ -881,7 +881,13 @@
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 14px;
/* Left 12px matches the icon-picker tabs (`.tabs-section` uses
`px-3`), so the back-chevron lines up with the "All / Emojis /
Icons / Custom" tab strip when switching between picker modes
via `< Back`. Right stays at 14px — that's the trash/del button
side and its baseline padding is fine. Mirrored in
`.text-picker-back` below. */
padding: 0 14px 0 12px;
height: 40px;
/* Tailwind utility for the full themed chain (matches the icon
picker's tabs-section so both topbars read as the same chrome).
@@ -1369,7 +1375,11 @@
.text-picker-back {
@apply flex-shrink-0 flex items-center justify-between;
padding: 8px 14px 7px 14px;
/* Left 12px matches the icon-picker tabs (`.tabs-section` uses
`px-3`) and `.asset-picker-tabrow` above, so the back-chevron
lines up with the tab strip when switching picker modes via
`< Back`. Right stays at 14px — trash button side. */
padding: 8px 14px 7px 12px;
/* Themed via Tailwind chain (matches the asset-picker and icon-picker topbars). */
@apply bg-gray-03;
border-bottom: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
@@ -2227,11 +2237,14 @@
body color shows above the gradient, breaking the visual continuity
between the elevated topbar and the customize panel. */
margin-top: -4px;
/* 18px horizontal padding on the wrapper. Both the content row and the
rail are siblings of this padding, so the rail's border-top is
inset 18px on each side — matches the Paper design (344px-wide
inner content inside the 380px band). */
padding: 0 18px;
/* 14px horizontal padding on the wrapper — both the content row and
the rail are siblings of this padding, so the rail's border-top
is inset accordingly. Symmetric 14px on both sides matches the
topbar's `.asset-picker-tabrow` / `.text-picker-back` right
padding, pulling the banner row inward by 4px vs the original
18px Paper inset so the avatar preview and the Edit affordance
sit closer to the popup edges. */
padding: 0 14px;
/* Two-layer base background — visible in both compact and expanded
states so the customize zone reads as a quietly-recessed banner
distinct from the image grid below:
@@ -2886,9 +2899,9 @@ html.dark .avatar-customize-zone .cb-rail {
align-items: center;
justify-content: space-between;
/* Horizontal padding lives on the wrapper now; only vertical padding
here. The border-top therefore spans the inner 344px (band's 380px
minus 2 × 18px wrapper padding) instead of bleeding to the band
edges, matching the Paper design. */
here. The border-top therefore spans the inner 352px (band's 380px
minus 2 × 14px wrapper padding) instead of bleeding to the band
edges. */
padding: 10px 0 12px;
/* Themed via --ls-border-color middle step (matches the topbar
separator and the customize-zone bottom border). */