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

fix(icon): unify padding strategy across picker surfaces

Browse Source 
Two structurally-distinct dropdown surfaces leak the popup's p-1 padding
in different ways, so they need different fixes:

- Top-level (shui/popup-show! → ui__dropdown-menu-content): icon-search
  is a direct child, and its outer class swaps with @*view
  (cp__emoji-icon-picker / asset-picker / text-picker). Apply `-m-1` to
  all three view classes so switching tabs via "< Back" doesn't jump.

- Sub-content (block-context-menu "Set icon" / "Add reaction"): the
  caller wraps the picker in an extra `[:div.p-1]`, stacking two p-1
  layers. Pass `{:class "!p-0"}` to the sub-content (matching the
  precedent at icon.cljs:4615-4625) and keep the inner wrapper for
  breathing room.

Also drop the orphan `.ui__dropdown-menu-sub-content .cp__emoji-icon-picker
{ -m-2 }` rule that would overshoot under the new `!p-0` math.
This commit is contained in:
scheinriese
2026-05-20 03:29:44 +02:00
parent 06540afa27
commit e967718a3d
2 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/frontend/components/content.cljs
View File

@@ -60,6 +60,7 @@
(shui/dropdown-menu-sub-trigger
(t :context-menu/set-icon))
(shui/dropdown-menu-sub-content
{:class "!p-0"}
[:div.p-1
(icon-component/icon-search
{:on-chosen (fn [_e icon]
@@ -215,6 +216,7 @@
(shui/dropdown-menu-sub-trigger
(t :command.editor/add-reaction))
(shui/dropdown-menu-sub-content
{:class "!p-0"}
[:div.p-1
(icon-component/icon-search
{:on-chosen (fn [_e icon]
@@ -243,6 +245,7 @@
(shui/dropdown-menu-sub-trigger
(t :context-menu/set-icon))
(shui/dropdown-menu-sub-content
{:class "!p-0"}
[:div.p-1
(let [icon-value (:logseq.property/icon block)]
(icon-component/icon-search

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

@@ -489,19 +489,23 @@
@apply -m-4;
}
.ui__dropdown-menu-content:has(> .cp__emoji-icon-picker) {
/* icon-search switches its outermost class based on @*view: emoji/icon mode
renders `.cp__emoji-icon-picker`, while avatar/image mode renders
`.asset-picker` and text mode renders `.text-picker` as a complete
replacement. All three render as a direct child of the top-level
`ui__dropdown-menu-content` (via shui/popup-show!), so each needs the
same `-m-1` to cancel the surface's baked-in p-1 — otherwise switching
between modes via "< Back" produces a 4px visual jump. The sub-menu
case (block-context-menu) uses a different mechanism: `{:class "!p-0"}`
on the sub-content + an inner `[:div.p-1]` wrapper. */
.ui__dropdown-menu-content:has(> .cp__emoji-icon-picker),
.ui__dropdown-menu-content:has(> .asset-picker),
.ui__dropdown-menu-content:has(> .text-picker) {
@apply flex;
}
.ui__dropdown-menu-content .cp__emoji-icon-picker {
@apply -m-1;
}
/* Same negative margin to counteract dropdown p-1 padding */
.ui__dropdown-menu-content .asset-picker {
@apply -m-1;
}
.ui__dropdown-menu-content .cp__emoji-icon-picker,
.ui__dropdown-menu-content .asset-picker,
.ui__dropdown-menu-content .text-picker {
@apply -m-1;
}
@@ -1193,14 +1197,6 @@
Text Picker (Level 2 view) - matches asset-picker structure
============================================================================ */
.ui__dropdown-menu-content:has(> .text-picker) {
@apply flex;
}
.ui__dropdown-menu-content .text-picker {
@apply -m-1;
}
.text-picker {
@apply flex flex-col overflow-hidden;
width: 380px;
@@ -2607,8 +2603,3 @@
}
.ui__dropdown-menu-sub-content {
.cp__emoji-icon-picker {
@apply -m-2;
}
}