Live Preview has unexpected edges

docs/API-Reference/command/Commands.md

@@ -452,6 +452,12 @@ Opens theme settings
 ## VIEW\_HIDE\_SIDEBAR
 Toggles sidebar visibility
 
+**Kind**: global variable  
+<a name="VIEW_TOGGLE_DESIGN_MODE"></a>
+
+## VIEW\_TOGGLE\_DESIGN\_MODE
+Toggles the design (full live-preview) mode — collapses/expands the editor
+
 **Kind**: global variable  
 <a name="TOGGLE_TABBAR"></a>
 

docs/API-Reference/view/WorkspaceManager.md

@@ -28,6 +28,7 @@ Events:
         * [.EVENT_WORKSPACE_UPDATE_LAYOUT](#module_view/WorkspaceManager..EVENT_WORKSPACE_UPDATE_LAYOUT)
         * [.EVENT_WORKSPACE_PANEL_SHOWN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_SHOWN)
         * [.EVENT_WORKSPACE_PANEL_HIDDEN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_HIDDEN)
+        * [.EVENT_WORKSPACE_DESIGN_MODE_CHANGE](#module_view/WorkspaceManager..EVENT_WORKSPACE_DESIGN_MODE_CHANGE)
         * [.createBottomPanel(id, $panel, [minSize], [title], [options])](#module_view/WorkspaceManager..createBottomPanel) ⇒ <code>Panel</code>
         * [.destroyBottomPanel(id)](#module_view/WorkspaceManager..destroyBottomPanel)
         * [.createPluginPanel(id, $panel, [minSize], $toolbarIcon, [initialSize])](#module_view/WorkspaceManager..createPluginPanel) ⇒ <code>Panel</code>
@@ -36,6 +37,8 @@ Events:
         * [.recomputeLayout(refreshHint)](#module_view/WorkspaceManager..recomputeLayout)
         * [.isPanelVisible(panelID)](#module_view/WorkspaceManager..isPanelVisible) ⇒ <code>boolean</code>
         * [.setPluginPanelWidth(width)](#module_view/WorkspaceManager..setPluginPanelWidth)
+        * [.isInDesignMode()](#module_view/WorkspaceManager..isInDesignMode) ⇒ <code>boolean</code>
+        * [.setDesignMode(active)](#module_view/WorkspaceManager..setDesignMode)
         * [.addEscapeKeyEventHandler(consumerName, eventHandler)](#module_view/WorkspaceManager..addEscapeKeyEventHandler) ⇒ <code>boolean</code>
         * [.removeEscapeKeyEventHandler(consumerName)](#module_view/WorkspaceManager..removeEscapeKeyEventHandler) ⇒ <code>boolean</code>
 
@@ -86,6 +89,13 @@ Event triggered when a panel is shown.
 ### view/WorkspaceManager.EVENT\_WORKSPACE\_PANEL\_HIDDEN
 Event triggered when a panel is hidden.
 
+**Kind**: inner constant of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+<a name="module_view/WorkspaceManager..EVENT_WORKSPACE_DESIGN_MODE_CHANGE"></a>
+
+### view/WorkspaceManager.EVENT\_WORKSPACE\_DESIGN\_MODE\_CHANGE
+Event triggered when design mode (editor collapsed, full live preview) is
+entered or exited. Payload: `(active: boolean)`.
+
 **Kind**: inner constant of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
 <a name="module_view/WorkspaceManager..createBottomPanel"></a>
 
@@ -189,6 +199,26 @@ No-op if no panel is currently visible.
 | --- | --- | --- |
 | width | <code>number</code> | Desired content width in pixels |
 
+<a name="module_view/WorkspaceManager..isInDesignMode"></a>
+
+### view/WorkspaceManager.isInDesignMode() ⇒ <code>boolean</code>
+Returns true while the workspace is in design mode (editor collapsed and
+live preview expanded to fill the editor area).
+
+**Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+<a name="module_view/WorkspaceManager..setDesignMode"></a>
+
+### view/WorkspaceManager.setDesignMode(active)
+Sets the design-mode flag and fires EVENT_WORKSPACE_DESIGN_MODE_CHANGE when
+the value actually changes. Intended to be called by the control bar; other
+callers should use the dedicated toggle command instead.
+
+**Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+
+| Param | Type |
+| --- | --- |
+| active | <code>boolean</code> | 
+
 <a name="module_view/WorkspaceManager..addEscapeKeyEventHandler"></a>
 
 ### view/WorkspaceManager.addEscapeKeyEventHandler(consumerName, eventHandler) ⇒ <code>boolean</code>

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

@@ -27,7 +27,7 @@
 
 #panel-live-preview-frame,
 #panel-md-preview-frame {
-    background-color: white;
+    background-color: transparent;
     position: relative;
 }
 

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -62,7 +62,7 @@
         <i class="fa fa-times live-preview-overlay-close" title="{{Strings.LIVE_PREVIEW_HIDE_OVERLAY}}"></i>
     </div>
     <div class="frame-container">
-        <div style="width: 3px;"></div>
+        <div style="width: 3px; flex-shrink: 0;"></div>
         <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"
                 width="100%" height="100%" seamless="true" srcdoc='<img width="50px" src="styles/images/Spinner-1s-200px.svg">'
                 sandbox="allow-same-origin allow-popups-to-escape-sandbox allow-popups allow-scripts allow-forms allow-modals allow-pointer-lock">

src/styles/brackets_scrollbars.less

@@ -51,7 +51,7 @@
     }
 
     ::-webkit-scrollbar-thumb {
-        box-shadow: none;
+        background-color: transparent;
         border: none;
     }
 
@@ -67,7 +67,8 @@
     :hover::-webkit-scrollbar-thumb,
     :focus::-webkit-scrollbar-thumb {
         border-radius: 999px;
-        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
+        background-color: rgba(0, 0, 0, 0.6);
+        background-clip: padding-box;
         border: 2px solid transparent;
     }
 
@@ -96,13 +97,14 @@
     }
     &::-webkit-scrollbar-thumb {
         border-radius: 999px;
-        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) inset !important;
+        background-color: rgba(0, 0, 0, 0.6) !important;
+        background-clip: padding-box !important;
         border: 2px solid transparent !important;
     }
 
     .dark & {
         &::-webkit-scrollbar-thumb {
-            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
+            background-color: rgba(255, 255, 255, 0.3) !important;
         }
     }
 }
@@ -116,7 +118,8 @@
     }
     &::-webkit-scrollbar-thumb {
         border-radius: 999px;
-        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3) inset !important;
+        background-color: rgba(0, 0, 0, 0.3) !important;
+        background-clip: padding-box !important;
         border: 2px solid transparent !important;
     }
 
@@ -125,76 +128,79 @@
             background-color: @dark-bc-menu-bg !important;
         }
         &::-webkit-scrollbar-thumb {
-            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
+            background-color: rgba(255, 255, 255, 0.3) !important;
         }
     }
 }
 
 .platform-linux, .platform-mac {
     // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
+    // Exclude iframes: WKWebView (Tauri macOS) doesn't render custom ::-webkit-scrollbar on
+    // iframe elements correctly, causing invisible scrollbars. Native scrollbar renders instead.
 
-    ::-webkit-scrollbar {
+    :not(iframe)::-webkit-scrollbar {
         width: 12px;
         height: 12px;
     }
 
-    ::-webkit-scrollbar-track:vertical {
+    :not(iframe)::-webkit-scrollbar-track:vertical {
         margin: 0 0 8px 0;
     }
 
-    ::-webkit-scrollbar-track:horizontal {
+    :not(iframe)::-webkit-scrollbar-track:horizontal {
         margin: 0 8px 0 0;
     }
 
-    ::-webkit-scrollbar-thumb {
+    :not(iframe)::-webkit-scrollbar-thumb {
         border-radius: 999px;
-        box-shadow: 0 0 0 5px @linux-scrollbar-thumb inset;
+        background-color: @linux-scrollbar-thumb;
+        background-clip: padding-box;
         border: 2px solid transparent;
     }
 
-    ::-webkit-scrollbar-corner {
+    :not(iframe)::-webkit-scrollbar-corner {
         background: none;
     }
 
-    ::-webkit-scrollbar-thumb:window-inactive {
-        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
+    :not(iframe)::-webkit-scrollbar-thumb:window-inactive {
+        background-color: @linux-scrollbar-thumb-inactive;
     }
 }
 
 .platform-win {
     // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
 
-    ::-webkit-scrollbar {
+    :not(iframe)::-webkit-scrollbar {
         width: 12px;
         height: 12px;
         background-color: transparent;
     }
 
-    ::-webkit-scrollbar:hover {
+    :not(iframe)::-webkit-scrollbar:hover {
         background-color:  @win-scrollbar-track;
     }
 
-    ::-webkit-scrollbar-thumb {
-        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
+    :not(iframe)::-webkit-scrollbar-thumb {
+        background-color: @win-scrollbar-thumb;
     }
 
-    .dragging ::-webkit-scrollbar-thumb,
-    ::-webkit-scrollbar-thumb:hover,
-    ::-webkit-scrollbar-thumb:focus {
-        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
+    .dragging :not(iframe)::-webkit-scrollbar-thumb,
+    :not(iframe)::-webkit-scrollbar-thumb:hover,
+    :not(iframe)::-webkit-scrollbar-thumb:focus {
+        background-color: @win-scrollbar-thumb-hover;
     }
-    ::-webkit-scrollbar-thumb:active {
-        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
+    :not(iframe)::-webkit-scrollbar-thumb:active {
+        background-color: @win-scrollbar-thumb-active;
     }
 
-    ::-webkit-scrollbar-thumb:vertical {
+    :not(iframe)::-webkit-scrollbar-thumb:vertical {
         min-height: 20px;
     }
-    ::-webkit-scrollbar-thumb:horizontal {
+    :not(iframe)::-webkit-scrollbar-thumb:horizontal {
         min-width: 20px;
     }
 
-    ::-webkit-scrollbar-corner {
+    :not(iframe)::-webkit-scrollbar-corner {
         background: none;
     }
 }
@@ -215,23 +221,23 @@
 
         // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
 
-        ::-webkit-scrollbar {
+        :not(iframe)::-webkit-scrollbar {
             background-color: transparent;
         }
 
-        ::-webkit-scrollbar:hover {
+        :not(iframe)::-webkit-scrollbar:hover {
             background-color: rgba(15, 15, 15, .5);
         }
 
-        ::-webkit-scrollbar-thumb {
-            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
+        :not(iframe)::-webkit-scrollbar-thumb {
+            background-color: rgb(49, 49, 49);
         }
-        ::-webkit-scrollbar-thumb:hover,
-        ::-webkit-scrollbar-thumb:focus {
-            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
+        :not(iframe)::-webkit-scrollbar-thumb:hover,
+        :not(iframe)::-webkit-scrollbar-thumb:focus {
+            background-color: rgb(89, 89, 89);
         }
-        ::-webkit-scrollbar-thumb:active {
-            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
+        :not(iframe)::-webkit-scrollbar-thumb:active {
+            background-color: rgb(169, 169, 169);
         }
     }
 
@@ -241,12 +247,13 @@
             background-color: transparent;
         }
 
-        ::-webkit-scrollbar-thumb {
-            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.24) inset;
+        :not(iframe)::-webkit-scrollbar-thumb {
+            background-color: rgba(255, 255, 255, 0.24);
         }
 
-        ::-webkit-scrollbar-thumb:window-inactive {
-            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
+        :not(iframe)::-webkit-scrollbar-thumb:window-inactive {
+            background-color: rgba(255, 255, 255, 0.12);
         }
     }
 }
+