[#7720] fixed multiple select options wrapping

ui/src/css/recordFields.css

@@ -230,6 +230,11 @@
     }
 }
 
+.more-marker {
+    align-self: flex-end;
+    color: var(--surfaceTxtHintColor);
+}
+
 .field-type-select {
     .field-select-choices-input {
         > input {
@@ -245,17 +250,14 @@
     }
 }
 
-.more-marker {
-    align-self: flex-end;
-    color: var(--surfaceTxtHintColor);
-}
-
+.field-type-select,
 .field-type-file {
     &.record-field-view {
         display: inline-flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 5px;
+        min-width: auto;
     }
 }
 
@@ -292,6 +294,13 @@
     }
 }
 
+.field-type-autodate,
+.field-type-date {
+    &.record-field-view {
+        flex-shrink: 0;
+    }
+}
+
 .hidden-field-blur {
     filter: blur(2.5px);
     transition: filter var(--animationSpeed);

ui/src/css/table.css

@@ -304,6 +304,10 @@ table {
     margin-right: calc(-1 * var(--spacing));
     container-type: inline-size scroll-state;
 
+    .label {
+        word-break: normal; /* container has overflow so there is no need to unnecessery break characters */
+    }
+
     .load-more-btn,
     .sticky-content {
         position: sticky;

ui/src/fields/select/view.js

@@ -6,7 +6,7 @@
 export function view(props) {
     return t.div(
         { className: "record-field-view field-type-select" },
-        t.div({ className: "inline-flex gap-5" }, () => {
+        () => {
             const opts = app.utils.toArray(props.record[props.field.name], false);
 
             if (!opts.length) {
@@ -20,6 +20,6 @@ export function view(props) {
                     textContent: app.utils.truncate(opt, 100),
                 });
             });
-        }),
+        },
     );
 }