Style: Improve folder picker dropdown in edit bookmark panel

Improves the styling of the folder picker dropdown in the edit bookmark panel to align with Photon Design System guidelines:

* Sets dropdown to take full width of the panel.
* Changes dropdown's `top` positioning to be directly below the input field.
* Updates border and outline styling for better visibility and focus indication.
* Adds a subtle box-shadow for visual separation.

These changes enhance the visual consistency and usability of the folder picker.
This commit is contained in:
Kristijan Ribarić
2024-11-27 22:27:01 +01:00
parent 1422b3393f
commit 5c7e23252b

View File

@@ -1,8 +1,8 @@
diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..cc4be5f91860383045d7560b34621c53fccc9bf3 100644
index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..2bc1b8dc5c0363aceb1f4671ca7423737217a75a 100644
--- a/browser/themes/shared/places/editBookmark.css
+++ b/browser/themes/shared/places/editBookmark.css
@@ -158,3 +158,69 @@
@@ -158,3 +158,71 @@
font-size: 0.9em;
margin: 2px 4px;
}
@@ -42,12 +42,14 @@ index 4c00982e620f4cfd5aa1d97d45a276f5d41d0d74..cc4be5f91860383045d7560b34621c53
+
+ul {
+ position: absolute;
+ top: calc(100% + 4px);
+ top: 100%;
+ left: 0;
+ right: 0;
+ max-height: 200px;
+ overflow-y: auto;
+ border: 1px solid var(--card-outline-color);
+ border-color: transparent;
+ outline: var(--in-content-focus-outline);
+ outline-offset: -1px;
+ border-top: none;
+ background-color: var(--zen-colors-tertiary);
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);