Lots of clean up to get Sponsorships working. Need to add the edit next.

src/app.css

@@ -15,22 +15,63 @@
 }
 
 body {
-    /* margin: 0; */
-    /* display: flex;
-  place-items: center; */
-    /* min-width: 320px; */
+    /* Use boarder-box to make things easier with borders and scrolling in general. */
+    box-sizing: border-box;
 
-    min-height: 100vh;
-    /* min-height: fit-content; */
-    /* height: 100%; */
+    /* outline: dashed thick blue; */
+    /* border: solid thick blue; */
 
-    min-width: 100vw;
-    /* width: 100%; */
+    margin: 1em;
+    padding: 0em;
 
-    /* contain: layout; */
-    /* contain: size; */
+    /* Account for the margin */
+    height: calc(100vh - 1em - 1em);
+
+    /* max-width: 1280px; */
+
+    /* background-color: hsla(240, 50%, 20%); */
+    background-color: hsla(207, 43%, 18%);
+
+    /* Display as flex does not seem to work well here. */
 }
 
+body>.svelte_target {
+
+    box-sizing: border-box;
+    /* box-sizing: content-box; */
+    /* outline: solid thin hsla(0, 50%, 50%, .50); */
+    border: solid medium hsla(0, 0%, 50%, .40);
+    /* border-color: hsla(207, 43%, 18%); */
+
+    /* background-color: white; */
+    /* background-color: hsla(240, 100%, 95%, .97); */
+    background-color: hsla(0, 0%, 100%, .90);
+
+
+    overflow: scroll;
+
+    height: 100%;
+    /* max-height: calc(100% - 1em); */
+
+    /* width: 100%; */
+    /* max-width: calc(100% - 1em); */
+    max-width: 1280px;
+
+    /* margin: 1em; */
+    /* Use auto margin to center this element within the body */
+    margin: auto;
+    padding: .5em;
+
+
+}
+
+/* Use this to fix the scrolling. This is mostly useful for wide tables. */
+/* This must be applied to the parent of the table. */
+body>.svelte_target .svelte_component {
+    overflow: scroll;
+}
+
+
 address {
     margin-bottom: .25em;
     padding-left: .5em;
@@ -45,6 +86,39 @@ pre {
     border: none;
 }
 
+table.ae_table {
+    /* border-collapse: collapse; */
+    border-spacing: 0px;
+    border: solid thin hsla(0, 0%, 0%, .30);
+
+    width: 100%;
+    max-width: 100%;
+
+    /* margin: 1em; */
+    /* padding: 1em; */
+    /* overflow: scroll; */
+
+}
+.ae_table tr {
+    border: solid thin hsla(0, 0%, 0%, .20);
+}
+.ae_table th {
+    border: solid thin hsla(0, 0%, 0%, .10);
+    border-bottom: solid thin hsla(0, 0%, 0%, .20);
+
+    padding: .5em;
+
+    /* text-align: center; */
+}
+.ae_table td {
+    border: solid thin hsla(0, 0%, 0%, .10);
+
+    padding: .5em;
+
+    text-align: center;
+}
+
+
 textarea {
     /* width: calc(fit-content - 1em); */
     width: 100%;
@@ -256,6 +330,14 @@ button:focus-visible {
     /* justify-content: space-evenly; */
 }
 
+.ae_flex {
+    display: flex;
+
+    /* flex-direction: row; */
+    /* align-items: center; */
+    /* justify-content: space-between; */
+}
+
 .ae_column {
     display: flex;
     flex-direction: column;
@@ -277,6 +359,17 @@ button:focus-visible {
     justify-content: space-around;
 }
 
+.ae_text_align_left {
+    text-align: left;
+}
+.ae_text_align_center {
+    text-align: center;
+}
+.ae_text_align_right {
+    text-align: right;
+}
+
+
 .ae_width_25 {
     width: 25%;
     /* max-width: 25%; */
@@ -377,6 +470,7 @@ button:focus-visible {
     border: solid medium hsla(0,100%,50%,.1);
 }
 
+/* This covers the entire viewable area. Essentially a new "body" */
 /* element_ae_modal ae_modal_showing_container ae_modal modal_cover_body */
 .ae_modal {
     position: fixed;
@@ -388,9 +482,11 @@ button:focus-visible {
     height: 100%;
     /* max-height: 100vh; */
 
-    min-width: 100vw;
-    width: 100%;
+    min-width: 100%;
+    /* width: 100%; */
+    width: 100vw;
     max-width: 100vw;
+    /* max-width: 1280px; */
 
     /* background-color: hsla(180,75%,90%,.75); */
     background-color: hsla(180,0%,90%,.75);
@@ -409,7 +505,7 @@ button:focus-visible {
 
     /* Margin should stay 0 and padding can be used to create space within the modal for the actual content. */
     margin: 0;
-    padding: 1em;
+    padding: 0em;
 
     /* pointer-events: auto; */
 }