From 1452667c63cf65d20492acdfac900cd0011fae52 Mon Sep 17 00:00:00 2001
From: William Moore <caranmegil@gmail.com>
Date: Tue, 6 Jun 2023 16:45:39 -0500
Subject: [PATCH] Update to edit page formatting

---
 src/edit.ts | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/edit.ts b/src/edit.ts
index e2446b0..14114a0 100644
--- a/src/edit.ts
+++ b/src/edit.ts
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
 export class LavenderConfigure extends LitElement {
   static override styles = [
     css`
-      .centerit {
+       .centerit {
         text-align: center;
       }
 
@@ -25,19 +25,31 @@ export class LavenderConfigure extends LitElement {
       }
 
       .widgets {
-        width: 100%;
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
+        flex-direction: row;
       }
 
       .widgets >* {
+        flex: 1 1 300px;
+        margin: .2em;
+        padding: .5em;
+        border: .1em solid black;
+        border-radius: .5em;
+      }
+
+      .widget-edit {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .widget-edit >* {
         margin: .2em;
         padding: .5em;
-        width: 100%;
       }
 
       input {
-        width: 50%;
+        width: 100%;
         padding: .5em;
         border-radius: .5em;
       }
@@ -88,16 +100,16 @@ export class LavenderConfigure extends LitElement {
       ${widgets.map((widget: any) => {
       return html`
           <div name="widget-edit">
-            <div><span>Title</span><input type="text" name="titleEdit" value="${widget.title}"></div>
-            <div><span>Href</span><input type="text" name="urlEdit" value="${widget.url}"></div>
-            <div><span>Height</span><input type="text" name="urlHeight" value="${widget.height}"></div>
+            <div><div>Title</div><input type="text" name="titleEdit" value="${widget.title}"></div>
+            <div><div>Href</div><input type="text" name="urlEdit" value="${widget.url}"></div>
+            <div><div>Height</div><input type="text" name="urlHeight" value="${widget.height}"></div>
           </div>
-        `;
+      `;
     })}
       <div name="widget-edit">
-        <div><span>Title </span><input type="text" name="titleEdit"></div >
-        <div><span>Href </span><input type="text" name="urlEdit"></div >
-        <div><span>Height</span><input type="text" name="urlHeight"></div>
+        <div><div>Title </div><input type="text" name="titleEdit"></div >
+        <div><div>Href </div><input type="text" name="urlEdit"></div >
+        <div><div>Height</div><input type="text" name="urlHeight"></div>
       </div>
     </div>
     <button class="button" @click="${() => this.save()}">Save</button>