From 52329650f7db028032ec80710139593f83a5692c Mon Sep 17 00:00:00 2001
From: Benjamin <benjaminpeinhardt@gmail.com>
Date: Sun, 24 Nov 2024 00:53:18 -0600
Subject: [PATCH] messing with styles

---
 main.css                     | 11 ++++++++-
 priv/static/squared_away.mjs | 46 +++++++++++++++++++++++++++++++-----
 src/squared_away.gleam       | 42 +++++++++++++++++++++++++-------
 3 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/main.css b/main.css
index 3eb8920..6c71103 100644
--- a/main.css
+++ b/main.css
@@ -8,8 +8,17 @@ table {
     display: inline;
 }
 
-.tg input {
+input {
     font-family: monospace;
 }
 
+input + input {
+    border-left: none;
+    border-top: none;
+}
+
+input:focus {
+    outline: none;
+}
+
 
diff --git a/priv/static/squared_away.mjs b/priv/static/squared_away.mjs
index ab358d3..9bccd5b 100644
--- a/priv/static/squared_away.mjs
+++ b/priv/static/squared_away.mjs
@@ -8020,6 +8020,14 @@ function view(model) {
               })();
               let color = $2[0];
               let background_color = $2[1];
+              let border = (() => {
+                let $13 = isEqual(model.active_cell, new Some(key));
+                if (!$13) {
+                  return "1px solid gray";
+                } else {
+                  return "1px solid DeepSkyBlue";
+                }
+              })();
               let input2 = input(
                 toList([
                   on_input2,
@@ -8034,17 +8042,32 @@ function view(model) {
                     toList([
                       ["background-color", background_color],
                       ["color", color],
-                      ["text-align", alignment]
+                      ["text-align", alignment],
+                      ["margin", "0px"],
+                      ["box-sizing", "border-box"],
+                      ["width", "7rem"],
+                      ["border", border]
                     ])
                   )
                 ])
               );
               let $12 = model.display_coords;
               if (!$12) {
-                return td(toList([]), toList([input2]));
+                return td(
+                  toList([
+                    style(
+                      toList([["padding", "0px"], ["margin", "0px"]])
+                    )
+                  ]),
+                  toList([input2])
+                );
               } else {
                 return td(
-                  toList([]),
+                  toList([
+                    style(
+                      toList([["padding", "0px"], ["margin", "0px"]])
+                    )
+                  ]),
                   toList([
                     label(toList([]), t(to_string7(key) + ": ")),
                     input2
@@ -8069,7 +8092,18 @@ function view(model) {
     });
   })();
   let grid = table(
-    toList([class$("tg")]),
+    toList([
+      style(
+        toList([
+          ["height", "70vh"],
+          ["width", "90vw"],
+          ["overflow-y", "auto"],
+          ["overflow-x", "auto"],
+          ["display", "block"],
+          ["border-collapse", "collapse"]
+        ])
+      )
+    ]),
     toList([tbody(toList([]), rows)])
   );
   let formula_mode_toggle = input(
@@ -8189,8 +8223,8 @@ function view(model) {
     ])
   );
 }
-var initial_grid_width = 7;
-var initial_grid_height = 20;
+var initial_grid_width = 30;
+var initial_grid_height = 40;
 function init2(_) {
   let src_grid = new$4(initial_grid_width, initial_grid_height, "");
   let type_checked_grid = new$4(
diff --git a/src/squared_away.gleam b/src/squared_away.gleam
index 2f3e46b..2435f8b 100644
--- a/src/squared_away.gleam
+++ b/src/squared_away.gleam
@@ -22,9 +22,9 @@ import squared_away/squared_away_lang/interpreter/value
 import squared_away/squared_away_lang/typechecker/typ
 import squared_away/squared_away_lang/typechecker/typed_expr
 
-const initial_grid_width = 7
+const initial_grid_width = 30
 
-const initial_grid_height = 20
+const initial_grid_height = 40
 
 pub fn main() {
   let app = lustre.application(init, update, view)
@@ -461,6 +461,11 @@ fn view(model: Model) -> element.Element(Msg) {
               }
           }
 
+          let border = case model.active_cell == Some(key) {
+            False -> "1px solid gray"
+            True -> "1px solid DeepSkyBlue"
+          }
+
           let input =
             html.input([
               on_input,
@@ -475,16 +480,24 @@ fn view(model: Model) -> element.Element(Msg) {
                 #("background-color", background_color),
                 #("color", color),
                 #("text-align", alignment),
+                #("margin", "0px"),
+                #("box-sizing", "border-box"),
+                #("width", "7rem"),
+                #("border", border),
               ]),
             ])
 
           case model.display_coords {
-            False -> html.td([], [input])
+            False ->
+              html.td(
+                [attribute.style([#("padding", "0px"), #("margin", "0px")])],
+                [input],
+              )
             True ->
-              html.td([], [
-                html.label([], t(grid.to_string(key) <> ": ")),
-                input,
-              ])
+              html.td(
+                [attribute.style([#("padding", "0px"), #("margin", "0px")])],
+                [html.label([], t(grid.to_string(key) <> ": ")), input],
+              )
           }
         })
 
@@ -494,7 +507,20 @@ fn view(model: Model) -> element.Element(Msg) {
     |> list.sort(fn(r1, r2) { int.compare(r1.0, r2.0) })
     |> list.map(fn(e) { e.1 })
 
-  let grid = html.table([attribute.class("tg")], [html.tbody([], rows)])
+  let grid =
+    html.table(
+      [
+        attribute.style([
+          #("height", "70vh"),
+          #("width", "90vw"),
+          #("overflow-y", "auto"),
+          #("overflow-x", "auto"),
+          #("display", "block"),
+          #("border-collapse", "collapse"),
+        ]),
+      ],
+      [html.tbody([], rows)],
+    )
 
   let formula_mode_toggle =
     html.input([