Update app.py

app.py

@@ -199,16 +199,18 @@ app_ui = ui.page_fluid(
           color: var(--navy);
           border: 1px solid rgba(0,0,0,.08);
           border-radius: 12px;
-          padding: 10px 18px;
+          padding: 12px 22px;
           font-weight: 900;
-          font-size: 20px;
+          font-size: 22px;
           line-height: 1;
           cursor: pointer;
           box-shadow: 0 2px 8px rgba(0,0,0,.14);
         }
+        #add-btn:hover{ filter: brightness(.97); }
 
         .err{
-          margin: 0 6px 10px 6px;
+          max-width: 1200px;
+          margin: 0 auto 10px auto;
           padding: 10px 12px;
           border-radius: 10px;
           background: #fff1f2;
@@ -218,102 +220,93 @@ app_ui = ui.page_fluid(
           display:none;
         }
 
-        /* Grid */
+        /* GRID: 2 columns, bigger spacing, centered */
         .cards-grid{
           display:grid;
-          grid-template-columns: repeat(4, minmax(260px, 1fr));
-          gap: 16px;
-          padding: 2px 6px 18px 6px;
-          align-items: start;
-        }
-        @media (max-width: 1200px){
-          .cards-grid{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
-        }
-        @media (max-width: 900px){
-          .cards-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
+          grid-template-columns: repeat(2, minmax(480px, 1fr));
+          gap: 22px;
+          padding: 10px 16px 22px 16px;
+          max-width: 1200px;
+          margin: 0 auto;
+          align-items:start;
         }
-        @media (max-width: 600px){
+        @media (max-width: 1050px){
           .cards-grid{ grid-template-columns: 1fr; }
         }
 
-        /* Card = TRUE square; content cannot force it taller */
+        /* Card = true square & big */
         .card{
           background: var(--cardBg);
           border: 1px solid var(--cardBorder);
-          border-radius: 12px;
+          border-radius: 14px;
           box-shadow: 0 1px 0 rgba(0,0,0,.02);
           aspect-ratio: 1 / 1;
           width: 100%;
           overflow: hidden;
-          display: flex;
-          flex-direction: column;
-          min-height: 0;   /* critical so children don't "push" height */
+          display:flex;
+          flex-direction:column;
+          min-height: 0;
         }
 
         .card-header{
           display:flex;
           align-items:center;
           justify-content:space-between;
-          padding: 10px 10px 6px 10px;
+          padding: 12px 12px 8px 12px;
           border-bottom: 1px solid #eef2f8;
           flex: 0 0 auto;
         }
+        .del-btn{
+          border: none;
+          background: transparent;
+          color: #7b879c;
+          font-weight: 900;
+          font-size: 20px;
+          cursor:pointer;
+          padding: 0 8px;
+        }
+        .del-btn:hover{ color:#1c2b44; }
 
         .card-main{
-          padding: 10px;
+          padding: 12px;
           display:flex;
           flex-direction:column;
-          gap: 8px;
+          gap: 10px;
           flex: 1 1 auto;
-          min-height: 0;   /* allow flex children to shrink */
-          overflow: hidden;/* NO card scrolling */
+          min-height: 0;
+          overflow:hidden; /* no card scroll */
         }
 
         .card-footer{
-          padding: 10px;
+          padding: 12px;
           border-top: 1px solid #eef2f8;
-          flex: 0 0 auto;  /* always visible */
-        }
-
-        .del-btn{
-          border: none;
-          background: transparent;
-          color: #7b879c;
-          font-weight: 900;
-          font-size: 18px;
-          cursor:pointer;
-          padding: 0 6px;
+          flex: 0 0 auto;
         }
 
         label{
           display:block;
           font-size: 12px;
           color: var(--muted);
-          margin: 0 0 4px;
-          font-weight: 650;
+          margin: 0 0 5px;
+          font-weight: 750;
+          letter-spacing: .2px;
         }
 
         input, textarea{
           width:100%;
           box-sizing:border-box;
           border: 1px solid #d8e1ee;
-          border-radius: 10px;
-          padding: 8px 10px;
+          border-radius: 12px;
+          padding: 10px 12px;
           font-size: 14px;
           outline: none;
           background: white;
         }
 
-        /* Flex textareas so they fit inside the square; scroll inside textarea only */
-        .grow{
-          display:flex;
-          flex-direction:column;
-          flex: 1 1 0;
-          min-height: 0;
-        }
-        .grow textarea{
-          flex: 1 1 0;
-          min-height: 0;
+        /* Each textarea shows ~3-4 lines by default */
+        textarea.ta{
+          height: 92px;       /* ~4 lines depending on font */
+          line-height: 1.25;
           resize: none;
           overflow: auto;
         }
@@ -325,7 +318,8 @@ app_ui = ui.page_fluid(
         }
 
         .empty{
-          margin: 0 6px;
+          max-width: 1200px;
+          margin: 0 auto;
           padding: 18px;
           background: white;
           border: 1px dashed #cfd9ea;
@@ -341,10 +335,10 @@ app_ui = ui.page_fluid(
           display:flex;
           align-items:center;
           justify-content:center;
-          z-index: 9999;
+          z-index: 99999;
         }
         .modal{
-          width: min(520px, calc(100vw - 28px));
+          width: min(560px, calc(100vw - 28px));
           background: white;
           border-radius: 14px;
           box-shadow: 0 10px 30px rgba(0,0,0,.25);
@@ -367,7 +361,7 @@ app_ui = ui.page_fluid(
         }
         .modal .checks label{
           margin: 0;
-          font-weight: 600;
+          font-weight: 650;
           font-size: 13px;
           color: #1f2a44;
           display:flex;
@@ -381,9 +375,9 @@ app_ui = ui.page_fluid(
           margin-top: 12px;
         }
         .btn{
-          border-radius: 10px;
-          padding: 8px 12px;
-          font-weight: 800;
+          border-radius: 12px;
+          padding: 9px 12px;
+          font-weight: 850;
           cursor:pointer;
           border: 1px solid #d8e1ee;
           background: #ffffff;
@@ -447,71 +441,90 @@ app_ui = ui.page_fluid(
               .replaceAll(">", ">");
           }
 
+          function fallbackDelete(cardId){
+            // 3 checks fallback (browser-native)
+            if(!confirm("Delete this card? This is permanent.")) return;
+            if(!confirm("Second check: confirm you REALLY want to delete.")) return;
+            const typed = prompt('Final check: type DELETE to confirm');
+            if(typed !== "DELETE") return;
+            return doDelete(cardId);
+          }
+
+          async function doDelete(cardId){
+            const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, { method: "DELETE" });
+            state.version = data.version;
+            state.cards = data.cards;
+            showErr("");
+            render();
+          }
+
           function openDeleteModal(cardId){
-            const backdrop = document.createElement("div");
-            backdrop.className = "modal-backdrop";
-            backdrop.innerHTML = `
-              <div class="modal" role="dialog" aria-modal="true">
-                <h3>Delete card?</h3>
-                <div class="muted">This is permanent and affects everyone viewing this Space.</div>
-
-                <div class="checks">
-                  <label><input type="checkbox" id="chk1" /> I understand this is permanent</label>
-                  <label><input type="checkbox" id="chk2" /> I confirm I want to delete this card</label>
-                </div>
+            try{
+              const backdrop = document.createElement("div");
+              backdrop.className = "modal-backdrop";
+              backdrop.innerHTML = `
+                <div class="modal" role="dialog" aria-modal="true">
+                  <h3>Delete card?</h3>
+                  <div class="muted">This is permanent and affects everyone viewing this Space.</div>
+
+                  <div class="checks">
+                    <label><input type="checkbox" id="chk1" /> I understand this is permanent</label>
+                    <label><input type="checkbox" id="chk2" /> I confirm I want to delete this card</label>
+                  </div>
 
-                <label style="margin:8px 0 4px; color:#1f2a44; font-weight:700;">Type DELETE to confirm</label>
-                <input type="text" id="typed" value="" />
+                  <label style="margin:8px 0 4px; color:#1f2a44; font-weight:800;">Type DELETE to confirm</label>
+                  <input type="text" id="typed" value="" />
 
-                <div class="actions">
-                  <button class="btn" id="cancel">Cancel</button>
-                  <button class="btn btn-danger" id="confirm" disabled>Delete</button>
+                  <div class="actions">
+                    <button class="btn" id="cancel" type="button">Cancel</button>
+                    <button class="btn btn-danger" id="confirm" type="button" disabled>Delete</button>
+                  </div>
                 </div>
-              </div>
-            `;
-            document.body.appendChild(backdrop);
-
-            const chk1 = backdrop.querySelector("#chk1");
-            const chk2 = backdrop.querySelector("#chk2");
-            const typed = backdrop.querySelector("#typed");
-            const cancel = backdrop.querySelector("#cancel");
-            const confirm = backdrop.querySelector("#confirm");
-
-            function updateEnabled(){
-              confirm.disabled = !(chk1.checked && chk2.checked && (typed.value || "") === "DELETE");
-            }
-            chk1.addEventListener("change", updateEnabled);
-            chk2.addEventListener("change", updateEnabled);
-            typed.addEventListener("input", updateEnabled);
+              `;
+              document.body.appendChild(backdrop);
 
-            function close(){ backdrop.remove(); }
-            cancel.addEventListener("click", close);
-            backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+              const chk1 = backdrop.querySelector("#chk1");
+              const chk2 = backdrop.querySelector("#chk2");
+              const typed = backdrop.querySelector("#typed");
+              const cancel = backdrop.querySelector("#cancel");
+              const confirmBtn = backdrop.querySelector("#confirm");
 
-            confirm.addEventListener("click", async () => {
-              try{
-                const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, { method: "DELETE" });
-                state.version = data.version;
-                state.cards = data.cards;
-                showErr("");
-                close();
-                render();
-              }catch(e){
-                showErr(String(e.message || e));
-                close();
+              function updateEnabled(){
+                confirmBtn.disabled = !(chk1.checked && chk2.checked && (typed.value || "") === "DELETE");
               }
-            });
+              chk1.addEventListener("change", updateEnabled);
+              chk2.addEventListener("change", updateEnabled);
+              typed.addEventListener("input", updateEnabled);
+
+              function close(){ backdrop.remove(); }
+              cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
+              backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+
+              confirmBtn.addEventListener("click", async (e) => {
+                e.preventDefault();
+                try{
+                  await doDelete(cardId);
+                  close();
+                }catch(err){
+                  showErr(String(err.message || err));
+                  close();
+                }
+              });
 
-            typed.focus();
+              typed.focus();
+            }catch(e){
+              // If anything about modal creation fails, use fallback popups
+              fallbackDelete(cardId);
+            }
           }
 
           function render(){
             if(state.cards.length === 0){
               grid.innerHTML = `<div class="empty"><b>No cards yet.</b><div>Click the ＋ to add your first card.</div></div>`;
-              grid.style.gridTemplateColumns = "1fr";
+              // keep the grid as-is; empty block will just sit in first column
               return;
             }
-            grid.style.gridTemplateColumns = "";
+
             grid.innerHTML = "";
 
             state.cards.forEach((c) => {
@@ -522,7 +535,7 @@ app_ui = ui.page_fluid(
               card.innerHTML = `
                 <div class="card-header">
                   <div></div>
-                  <button class="del-btn" title="Delete">×</button>
+                  <button class="del-btn" type="button" title="Delete">×</button>
                 </div>
 
                 <div class="card-main">
@@ -531,14 +544,14 @@ app_ui = ui.page_fluid(
                     <input type="text" class="model" value="${escapeHtml(c.model)}" />
                   </div>
 
-                  <div class="grow">
+                  <div>
                     <label>How it Works</label>
-                    <textarea class="how">${escapeHtml(c.how_it_works)}</textarea>
+                    <textarea class="how ta">${escapeHtml(c.how_it_works)}</textarea>
                   </div>
 
-                  <div class="grow">
+                  <div>
                     <label>Use Cases</label>
-                    <textarea class="use">${escapeHtml(c.use_cases)}</textarea>
+                    <textarea class="use ta">${escapeHtml(c.use_cases)}</textarea>
                   </div>
                 </div>
 
@@ -592,7 +605,12 @@ app_ui = ui.page_fluid(
               }
 
               [modelEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", scheduleSave));
-              delBtn.addEventListener("click", () => openDeleteModal(c.id));
+
+              delBtn.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openDeleteModal(c.id);
+              });
 
               updateLink();
               grid.appendChild(card);
@@ -630,7 +648,7 @@ app_ui = ui.page_fluid(
           });
 
           refresh().then(render);
-          setInterval(refresh, 3000);
+          setInterval(refresh, 2500);
         })();
         """
     ),