improve objectEntry layout

dist/index.css

@@ -8,8 +8,8 @@
   --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
 }
 .object-entry-wide {
-  width: 280px;
+  width: 320px;
-  min-width: 280px;
+  min-width: 320px;
 }
 #message-tab {
   flex-direction: column;

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]
       }
     );

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;
 }

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>

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>
   );

src/styles.css

@@ -10,8 +10,8 @@
 }
 
 .object-entry-wide {
-  width: 280px;
+  width: 320px;
-  min-width: 280px;
+  min-width: 320px;
 }
 
 #message-tab {