feat: add fit to panel button after resizing in design mode

Author: devvaannsh

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

@@ -178,6 +178,24 @@
     margin-top: 0;
 }
 
+.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;

src/nls/root/strings.js

@@ -527,6 +527,7 @@ define({
     "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",