From bb5550a8fe31cbd004cf3df4dd5cd76794d35ef5 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Fri, 12 Jul 2024 15:45:26 +0200
Subject: [PATCH] improve objectEntry layout

---
 dist/index.css                        |  4 ++--
 dist/index.js                         | 14 +++++++++++---
 dist/styles.css                       |  8 ++++++++
 src/Views/Objects/objectEntryView.tsx |  8 ++++++--
 src/Views/Objects/objectGridView.tsx  |  2 +-
 src/styles.css                        |  4 ++--
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index e4b4bfc9..a708588d 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -8,8 +8,8 @@
   --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
 }
 .object-entry-wide {
-  width: 280px;
-  min-width: 280px;
+  width: 320px;
+  min-width: 320px;
 }
 #message-tab {
   flex-direction: column;
diff --git a/dist/index.js b/dist/index.js
index d5867a63..f152c439 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1428,6 +1428,7 @@
     const fields = {
       [icons.noteContent]: "---",
       [icons.priority]: "---",
+      [icons.categoryName]: "---",
       [icons.status]: "---",
       [icons.date]: "---",
       [icons.time]: "---"
@@ -1442,7 +1443,7 @@
     });
     const fieldElements = Object.entries(fields).map((field) => {
       const [icon, value] = field;
-      return /* @__PURE__ */ createElement("span", { class: "flex-row control-gap align-center" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("span", { class: "ellipsis" }, value));
+      return /* @__PURE__ */ createElement("span", { class: "flex-row control-gap flex align-center padding-right ellipsis" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("span", { class: "ellipsis" }, value));
     });
     return /* @__PURE__ */ createElement(
       "button",
@@ -1452,7 +1453,14 @@
         draggable: "true",
         "on:dragstart": dragStart
       },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("span", { class: "flex-column gap height-100 flex secondary ellipsis " }, ...fieldElements))
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+        "span",
+        {
+          class: "grid height-100 flex secondary",
+          style: "grid-template-columns: 1fr 1fr"
+        },
+        ...fieldElements
+      ))
     );
   }
 
@@ -1475,7 +1483,7 @@
       "div",
       {
         class: "width-100 max-height-100 grid gap padding scroll-v",
-        style: "grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));",
+        style: "grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));",
         "children:prepend": [messageObjects, objectConverter]
       }
     );
diff --git a/dist/styles.css b/dist/styles.css
index 4369dc09..bedfbe2c 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -616,10 +616,18 @@ label.tile:has(> span.icon) {
   padding-left: var(--control-padding);
 }
 
+.padding-left {
+  padding-left: var(--control-padding) !important;
+}
+
 label.tile:has(> span.icon) :is(input, select, textarea) {
   padding-left: 0px;
 }
 
+.padding-right {
+  padding-right: var(--control-padding) !important;
+}
+
 .padding-bottom {
   padding-bottom: var(--control-padding) !important;
 }
diff --git a/src/Views/Objects/objectEntryView.tsx b/src/Views/Objects/objectEntryView.tsx
index 316c025c..305f07b7 100644
--- a/src/Views/Objects/objectEntryView.tsx
+++ b/src/Views/Objects/objectEntryView.tsx
@@ -28,6 +28,7 @@ export function ObjectEntryView(
   const fields = {
     [icons.noteContent]: "---",
     [icons.priority]: "---",
+    [icons.categoryName]: "---",
     [icons.status]: "---",
     [icons.date]: "---",
     [icons.time]: "---",
@@ -46,7 +47,7 @@ export function ObjectEntryView(
   const fieldElements = Object.entries(fields).map((field) => {
     const [icon, value] = field;
     return (
-      <span class="flex-row control-gap align-center">
+      <span class="flex-row control-gap flex align-center padding-right ellipsis">
         <span class="icon">{icon}</span>
         <span class="ellipsis">{value}</span>
       </span>
@@ -63,7 +64,10 @@ export function ObjectEntryView(
       <div>
         <b class="ellipsis">{chat.getObjectTitle(messageObject)}</b>
         <hr></hr>
-        <span class="flex-column gap height-100 flex secondary ellipsis ">
+        <span
+          class="grid height-100 flex secondary"
+          style="grid-template-columns: 1fr 1fr"
+        >
           {...fieldElements}
         </span>
       </div>
diff --git a/src/Views/Objects/objectGridView.tsx b/src/Views/Objects/objectGridView.tsx
index 7adc1f5e..c563a814 100644
--- a/src/Views/Objects/objectGridView.tsx
+++ b/src/Views/Objects/objectGridView.tsx
@@ -29,7 +29,7 @@ export function ObjectGridView(
   ) : (
     <div
       class="width-100 max-height-100 grid gap padding scroll-v"
-      style="grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));"
+      style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));"
       children:prepend={[messageObjects, objectConverter]}
     ></div>
   );
diff --git a/src/styles.css b/src/styles.css
index 773c09b5..e815851f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -10,8 +10,8 @@
 }
 
 .object-entry-wide {
-  width: 280px;
-  min-width: 280px;
+  width: 320px;
+  min-width: 320px;
 }
 
 #message-tab {