Set fixed window width

README.md

@@ -42,6 +42,8 @@ CodeSnap is highly configurable. Here's a list of settings you can change to tun
 
 **`codesnap.backgroundColor`:** The background color of the snippet's container. Can be any valid CSS color.
 
+**`codesnap.fixedWidth`:** The width of the container for the snippet. Can be any valid CSS width.
+
 **`codesnap.boxShadow`:** The CSS box-shadow for the snippet. Can be any valid CSS box shadow.
 
 **`codesnap.containerPadding`:** The padding for the snippet's container. Can be any valid CSS padding.

package.json

@@ -54,6 +54,12 @@
           "default": "#abb8c3",
           "description": "The background color of the snippet's container"
         },
+        "codesnap.fixedWidth": {
+          "scope": "resource",
+          "type": "string",
+          "default": "",
+          "description": "The width of the container for the snippet (Leave blank for dynamic width)"
+        },
         "codesnap.boxShadow": {
           "scope": "resource",
           "type": "string",

src/extension.js

@@ -12,6 +12,7 @@ const getConfig = () => {
 
   const extensionSettings = getSettings('codesnap', [
     'backgroundColor',
+    'fixedWidth',
     'boxShadow',
     'containerPadding',
     'roundedCorners',

webview/src/index.js

@@ -28,7 +28,8 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       roundedCorners,
       showWindowControls,
       showWindowTitle,
-      windowTitle
+      windowTitle,
+      fixedWidth
     } = config;
 
     setVar('ligatures', fontLigatures ? 'normal' : 'none');
@@ -38,6 +39,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
     setVar('box-shadow', boxShadow);
     setVar('container-padding', containerPadding);
     setVar('window-border-radius', roundedCorners ? '4px' : 0);
+    if (fixedWidth) setVar('window-width', fixedWidth);
 
     navbarNode.hidden = !showWindowControls && !showWindowTitle;
     windowControlsNode.hidden = !showWindowControls;

webview/style.css

@@ -6,6 +6,7 @@ html {
   --box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
   --container-padding: 3em;
   --window-border-radius: 4px;
+  --window-width: max-content;
   box-sizing: border-box;
 }
 body {
@@ -38,7 +39,7 @@ body {
   box-shadow: var(--box-shadow);
   overflow: hidden;
   resize: horizontal;
-  width: max-content;
+  width: var(--window-width);
   min-width: 100px;
   padding: 18px;
   background-color: var(--vscode-editor-background);