refs 5987 fix title descriptor and card body

src/components/ui/CardDescriptor.vue

@@ -111,12 +111,12 @@ watch($props, async () => {
                 <QList dense>
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
-                            <span v-if="$props.title">
+                            <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
                                 <QTooltip>{{ $props.title }}</QTooltip>
                             </span>
                             <slot v-else name="description" :entity="entity">
-                                <span>
+                                <span :title="entity.name">
                                     {{ entity.name }}
                                     <QTooltip>{{ entity.name }}</QTooltip>
                                 </span>
@@ -184,6 +184,8 @@ watch($props, async () => {
 
 <style lang="scss" scoped>
 .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
     span {
         color: $primary;
         font-weight: bold;

src/components/ui/CardList.vue

@@ -12,10 +12,11 @@ const $props = defineProps({
                     {{ $props.title ?? `#${$props.id}` }}
                 </div>
             </slot>
-            <div class="card-list-container">
+            <div class="card-list-body">
                 <div class="list-items">
                     <slot name="list-items" />
                 </div>
+
                 <div class="actions">
                     <slot name="actions" />
                 </div>
@@ -24,7 +25,7 @@ const $props = defineProps({
     </QCard>
 </template>
 <style lang="scss">
-.card-list-container {
+.card-list-body {
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
@@ -44,19 +45,18 @@ const $props = defineProps({
             white-space: nowrap;
         }
     }
-
-    .actions {
-        .q-btn {
-            width: 30px;
-        }
-        .q-icon {
-            color: $primary;
-            font-size: 30px;
-        }
+}
+.actions {
+    .q-btn {
+        width: 30px;
+    }
+    .q-icon {
+        color: $primary;
+        font-size: 25px;
     }
 }
 @media (max-width: 460px) {
-    .card-list-container {
+    .card-list-body {
         .vn-label-value {
             .value {
                 max-width: 150px;
@@ -71,17 +71,21 @@ const $props = defineProps({
     padding: 30px;
     transition: background-color 0.2s;
 }
+.card-list-body {
+    display: flex;
+    justify-content: space-between;
+}
 .card:hover {
     background-color: $light-gray;
 }
 .title {
     color: $primary;
-    font-size: 25px;
+    font-size: 22px;
     font-weight: bold;
 }
 .list-items {
+    width: 100%;
     margin-top: 20px;
-    width: 89%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     row-gap: 10px;
@@ -89,16 +93,9 @@ const $props = defineProps({
     margin-right: 5px;
 }
 
-.card-list-container {
-    display: flex;
-    flex-wrap: wrap;
-}
 .actions {
     display: flex;
-    justify-content: center;
-    align-items: end;
     flex-direction: column;
-    width: 9%;
 }
 @media (max-width: 600px) {
     .list-items {
@@ -106,9 +103,4 @@ const $props = defineProps({
         grid-gap: 5px;
     }
 }
-@media (min-width: 1000px) and (max-width: 1150px) {
-    .list-items {
-        grid-template-columns: 1fr;
-    }
-}
 </style>