Live Preview Resize ruler feature

docs/API-Reference/view/PanelView.md

@@ -68,12 +68,6 @@ recomputeLayout callback from WorkspaceManager
 ## \_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="_$overflowBtn"></a>
 

docs/API-Reference/view/WorkspaceManager.md

@@ -190,7 +190,8 @@ Returns true if visible else false.
 ### view/WorkspaceManager.setPluginPanelWidth(width)
 Programmatically sets the plugin panel content width to the given value in pixels.
 The total toolbar width is adjusted to account for the plugin icons bar.
-Width is clamped to respect panel minWidth and max size (75% of window).
+If the requested width doesn't fit, the sidebar is progressively shrunk
+(and collapsed if necessary) before clamping.
 No-op if no panel is currently visible.
 
 **Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  

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

@@ -5,7 +5,7 @@
 .live-preview-browser-btn {
     opacity: 0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
+    transition: opacity 1s, visibility 0s linear 1s; 
 }
 
 #live-preview-plugin-toolbar {
@@ -27,7 +27,7 @@
 
 #panel-live-preview-frame,
 #panel-md-preview-frame {
-    background-color: transparent;
+    background-color: white;
     position: relative;
 }
 
@@ -50,6 +50,127 @@
     height: calc(100% - var(--toolbar-height));
 }
 
+.frame-container.responsive-viewport {
+    position: relative;
+    justify-content: center;
+    align-items: stretch;
+    background: #1a1a1e;
+}
+
+.frame-container.responsive-viewport > div:first-child:not(.responsive-handle) {
+    display: none;
+}
+
+.responsive-handle {
+    flex-shrink: 0;
+    z-index: 5;
+    background: transparent;
+    transition: background 0.15s;
+}
+
+.responsive-handle:hover,
+.responsive-handle.dragging {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.responsive-handle-horizontal {
+    width: 10px;
+    cursor: ew-resize;
+    position: relative;
+}
+
+.responsive-handle-horizontal::before,
+.responsive-handle-horizontal::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1px;
+    height: 16px;
+    border-radius: 0.5px;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.responsive-handle-horizontal::before {
+    transform: translate(calc(-50% - 2px), -50%);
+}
+
+.responsive-handle-horizontal::after {
+    transform: translate(calc(-50% + 2px), -50%);
+}
+
+.responsive-handle-horizontal:hover::before,
+.responsive-handle-horizontal:hover::after,
+.responsive-handle-horizontal.dragging::before,
+.responsive-handle-horizontal.dragging::after {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.responsive-handle-left {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.responsive-handle-left:hover,
+.responsive-handle-left.dragging {
+    opacity: 1;
+}
+
+.responsive-handle-vertical {
+    position: absolute;
+    height: 10px;
+    cursor: ns-resize;
+    box-sizing: border-box;
+}
+
+.responsive-handle-vertical::before,
+.responsive-handle-vertical::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 1px;
+    border-radius: 0.5px;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.responsive-handle-vertical::before {
+    transform: translate(-50%, calc(-50% - 2px));
+}
+
+.responsive-handle-vertical::after {
+    transform: translate(-50%, calc(-50% + 2px));
+}
+
+.responsive-handle-vertical:hover::before,
+.responsive-handle-vertical:hover::after,
+.responsive-handle-vertical.dragging::before,
+.responsive-handle-vertical.dragging::after {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.responsive-dimension-label {
+    position: absolute;
+    transform: translateX(-50%);
+    z-index: 10;
+    display: none;
+    padding: 6px 16px;
+    border-radius: 6px;
+    background: rgba(0, 0, 0, 0.88);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+    white-space: nowrap;
+    pointer-events: none;
+    letter-spacing: 0.5px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
 .plugin-toolbar {
     height: var(--toolbar-height);
     color: #a0a0a0;
@@ -61,10 +182,30 @@
 
 .toolbar-button {
     background-color: transparent;
-    width:28px;
+    width: 28px;
     height: 22px;
 }
 
+#live-preview-plugin-toolbar .btn-alt-quiet:hover,
+#live-preview-plugin-toolbar .btn-alt-quiet:focus,
+#live-preview-plugin-toolbar .btn-alt-quiet:active {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+#live-preview-plugin-toolbar .lp-device-size-icon:hover,
+#live-preview-plugin-toolbar .lp-device-size-icon:focus,
+#live-preview-plugin-toolbar .lp-device-size-icon:active {
+    border: none !important;
+}
+
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:hover,
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:focus,
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:active {
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
 .open-icon {
     background: url("./images/sprites.svg#open-icon") no-repeat 72.5%;
     width: 30px;
@@ -101,45 +242,100 @@
     opacity: 0;
     color: #a0a0a0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
+    transition: opacity 1s, visibility 0s linear 1s; 
     width: 30px;
     height: 22px;
     padding: 1px 6px;
     flex-shrink: 0;
     margin-top: 0;
 }
 
-.lp-device-size-icon {
-    min-width: fit-content;
+.lp-fit-to-panel-btn {
+    color: #a0a0a0;
+    flex-shrink: 0;
+    margin: 0 2px;
+    background: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+    font-size: 12px;
+}
+
+.lp-fit-to-panel-btn:hover,
+.lp-fit-to-panel-btn:focus,
+.lp-fit-to-panel-btn:active {
+    background: transparent !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+.lp-device-size-btn-group {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     margin: 0 4px 0 3px;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none;
     border: 1px solid transparent;
+    border-radius: 3px;
     box-sizing: border-box;
+}
+
+.lp-device-size-btn-group:hover {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-device-size-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
     color: #a0a0a0;
-    padding: 0 0.35em;
+    padding: 0;
+    margin: 0;
 }
 
 .lp-device-size-icon:hover,
 .lp-device-size-icon:focus,
 .lp-device-size-icon:active {
     background: transparent !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: none !important;
     box-shadow: none !important;
 }
 
-#deviceSizeBtn.btn-dropdown::after {
-    position: static;
-    margin-left: 5px;
+.lp-device-size-dropdown-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
+    border-left: 1px solid transparent;
+    border-radius: 0 3px 3px 0;
+    color: #a0a0a0;
+    padding: 0 4px;
+    margin: 0;
+    height: 22px;
+    font-size: 10px;
+}
+
+.lp-device-size-btn-group:hover .lp-device-size-dropdown-chevron {
+    border-left-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-device-size-dropdown-chevron:hover,
+.lp-device-size-dropdown-chevron:focus,
+.lp-device-size-dropdown-chevron:active {
+    background: transparent !important;
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
 }
 
 .device-size-item-icon {
     margin-right: 6px;
-    width: 12px;
-    text-align: center;
     font-size: inherit;
 }
 
@@ -152,17 +348,12 @@
 
 .device-size-item-width {
     margin-left: 10px;
-    opacity: 0.5;
-}
-
-.device-size-item-disabled {
-    opacity: 0.35;
+    color: #9a9a9a;
+    font-size: 12.5px;
 }
 
 .device-size-item-breakpoint-icon {
     margin-right: 6px;
-    width: 12px;
-    text-align: center;
     font-size: inherit;
     color: rgba(100, 180, 255, 0.8);
 }
@@ -259,7 +450,6 @@
     color: #fff;
 }
 
-/* Persistent cursor-sync highlight on CM line corresponding to md viewer cursor */
 .cm-cursor-sync-highlight {
     background-color: rgba(100, 150, 255, 0.18) !important;
 }

src/nls/root/strings.js

@@ -523,7 +523,11 @@ define({
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP": "💡 Type folder path or leave empty to download in 'images' folder.",
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project",
     "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro",
-    "DEVICE_SIZE_LIMIT_MESSAGE": "Phoenix Pro lets you preview your page at the screen sizes defined in your CSS.",
+    "DEVICE_SIZE_LIMIT_MESSAGE": "See how your page looks on phones, tablets, desktops, and your CSS breakpoints. Upgrade to Phoenix Pro.",
+    "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space for this screen size - try zooming out",
+    "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop",
+    "DEVICE_SIZE_DROPDOWN_TOOLTIP": "All device sizes",
+    "DEVICE_SIZE_FIT_TO_PANEL": "Fit to panel",
     "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.",
     "IMAGE_UPLOADING": "Uploading",
     "IMAGE_UPLOAD_FAILED": "Failed to upload image",
@@ -1557,7 +1561,7 @@ define({
     "BOTTOM_PANEL_MINIMIZE": "Minimize Panel",
     "BOTTOM_PANEL_SHOW": "Show Bottom Panel",
     "BOTTOM_PANEL_HIDE_TOGGLE": "Hide Bottom Panel",
-    "BOTTOM_PANEL_DEFAULT_TITLE": "Tools",
+    "BOTTOM_PANEL_DEFAULT_TITLE": "Quick Access - Tools",
     "BOTTOM_PANEL_DEFAULT_HEADING": "Open a Panel",
     "BOTTOM_PANEL_OPEN_PANEL": "Open a Panel",
     "BOTTOM_PANEL_MAXIMIZE": "Maximize Panel",