From d6e1c8998dd65aeaf02aa5cc1565e45bd673152c Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Wed, 22 Mar 2023 18:45:17 +0000
Subject: [PATCH] add flex styles, make filename full-width

---
 index.html | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3acf9b3..906607b 100644
--- a/index.html
+++ b/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;
-        background: #777;
+        display: flex;
+        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)
   }
 }