refactor: better live preview toolbar icons positioning

Author: devvaannsh

docs/API-Reference/view/PanelView.md

@@ -171,6 +171,18 @@ The editor holder element, passed from WorkspaceManager
 ## \_recomputeLayout : <code>function</code>
 recomputeLayout callback from WorkspaceManager
 
+**Kind**: global variable
+<a name="_defaultPanelId"></a>
+
+## \_defaultPanelId : <code>string</code> \| <code>null</code>
+The default/quick-access panel ID
+
+**Kind**: global variable
+<a name="_$addBtn"></a>
+
+## \_$addBtn : <code>jQueryObject</code>
+The "+" button inside the tab overflow area
+
 **Kind**: global variable  
 <a name="EVENT_PANEL_HIDDEN"></a>
 
@@ -205,10 +217,16 @@ during drag without being overly sensitive.
 Minimum panel height (matches Resizer minSize) used as a floor
 when computing a sensible restore height.
 
+**Kind**: global constant
+<a name="PREF_BOTTOM_PANEL_MAXIMIZED"></a>
+
+## PREF\_BOTTOM\_PANEL\_MAXIMIZED
+Preference key for persisting the maximize state across reloads.
+
 **Kind**: global constant  
 <a name="init"></a>
 
-## init($container, $tabBar, $tabsOverflow, $editorHolder, recomputeLayoutFn)
+## init($container, $tabBar, $tabsOverflow, $editorHolder, recomputeLayoutFn, defaultPanelId)
 Initializes the PanelView module with references to the bottom panel container DOM elements.
 Called by WorkspaceManager during htmlReady.
 
@@ -221,6 +239,7 @@ Called by WorkspaceManager during htmlReady.
 | $tabsOverflow | <code>jQueryObject</code> | The scrollable area holding tab elements. |
 | $editorHolder | <code>jQueryObject</code> | The editor holder element (for maximize height calculation). |
 | recomputeLayoutFn | <code>function</code> | Callback to trigger workspace layout recomputation. |
+| defaultPanelId | <code>string</code> | The ID of the default/quick-access panel. |
 
 <a name="exitMaximizeOnResize"></a>
 

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -80,13 +80,9 @@
 }
 
 #live-preview-plugin-toolbar:hover .lp-settings-icon {
-    display: flex;
-    align-items: center;
-    color: #a0a0a0;
     opacity: 1;
     visibility: visible;
     transition: unset;
-    padding-left: 7.5px;
 }
 
 .live-preview-settings input.error, .live-preview-settings input:focus.error{
@@ -98,25 +94,37 @@
 .lp-settings-icon {
     opacity: 0;
     color: #a0a0a0;
-    display: flex;
-    align-items: center;
     visibility: hidden;
     transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
-    padding-left: 7.5px;
+    width: 30px;
+    height: 22px;
+    padding: 1px 6px;
+    flex-shrink: 0;
+    margin-top: 3.5px;
 }
 
 .lp-device-size-icon {
-    color: #a0a0a0;
+    min-width: fit-content;
     display: flex;
     align-items: center;
-    padding-left: 7.5px;
-    margin-right: 7.5px;
+    margin: 3.5px 4px 0 3px;
+    cursor: pointer;
+    background: #3C3F41;
+    box-shadow: none;
+    border: 1px solid #3C3F41;
+    box-sizing: border-box;
+    color: #a0a0a0;
+    padding: 0 0.35em;
+}
+
+.lp-device-size-icon:hover {
+    border: 1px solid rgba(0, 0, 0, 0.24) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
 }
 
 #deviceSizeBtn.btn-dropdown::after {
     position: static;
-    margin-top: 2px;
-    margin-left: 3px;
+    margin-left: 5px;
 }
 
 .device-size-item-icon {
@@ -154,7 +162,7 @@
     min-width: fit-content;
     display: flex;
     align-items: center;
-    margin: 3px 4px 0 3px;
+    margin: 3.5px 4px 0 3px;
     max-width: 80%;
     text-overflow: ellipsis;
     overflow: hidden;