Adjust ButtonGroup css

Author: bendera

src/vscode-button-group/vscode-button-group.styles.ts

@@ -6,10 +6,13 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
-      display: inline-flex;
+      display: inline-block;
+    }
+
+    .root {
       align-items: stretch;
-      padding: 0;
-      border: none;
+      display: flex;
+      width: 100%;
     }
 
     ::slotted(vscode-button:not(:first-child)) {
@@ -28,6 +31,10 @@ const styles: CSSResultGroup = [
     ::slotted(vscode-button:focus) {
       z-index: 1;
     }
+
+    ::slotted(vscode-button:not(:empty)) {
+      width: 100%;
+    }
   `,
 ];
 

src/vscode-button-group/vscode-button-group.ts

@@ -24,7 +24,7 @@ export class VscodeButtonGroup extends VscElement {
   static override styles = styles;
 
   override render(): TemplateResult {
-    return html` <slot></slot> `;
+    return html`<div class="root"><slot></slot></div>`;
   }
 }