add flex styles, make filename full-width

index.html

@@ -1,3 +1,16 @@
+<style>
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>
 <script type="module">
 class FileGroup extends HTMLElement {
   constructor() {
@@ -15,8 +28,11 @@ class FileGroup extends HTMLElement {
       :host {
         display: flex;
         flex-direction: column;
+        align-items: stretch;
       }
       div.header {
+        display: flex;
+        flex-direction: row;
       }
       div.files {
         display: flex;
@@ -39,19 +55,34 @@ class FileView extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
+    this.headerEl = document.createElement('div')
+    this.headerEl.classList.add('header')
+    this.contentEl = document.createElement('div')
+    this.shadowRoot.appendChild(this.headerEl)
+    this.shadowRoot.appendChild(this.contentEl)
   }
 
   connectedCallback() {
     const style = document.createElement('style')
     style.textContent = `
       :host {
-        height: 100px;
+        display: flex;
-        background: #777;
+        flex-direction: column;
+        align-items: stretch;
+      }
+      div.header {
+        display: flex;
+        flex-direction: row;
+        background: yellow;
+      }
+      .name {
+        flex-grow: 1;
       }
     `
     this.shadowRoot.appendChild(style)
     this.nameEl = document.createElement('input')
-    this.shadowRoot.appendChild(this.nameEl)
+    this.nameEl.classList.add('name')
+    this.headerEl.appendChild(this.nameEl)
   }
 }