Merge pull request #22621 from mvdbeek/fix-export-card

Fix long title squashing in g-card

Author: davelopez

client/src/components/Common/GCard.vue

@@ -329,8 +329,8 @@ function onKeyDown(event: KeyboardEvent) {
                 <div class="d-flex flex-column flex-gapy-1">
                     <div
                         :id="`g-card-${props.id}-header`"
-                        class="d-flex flex-gapy-1 flex-gapx-1 justify-content-between">
-                        <div class="d-flex flex-column">
+                        class="d-flex flex-wrap flex-gapy-1 flex-gapx-1 justify-content-between">
+                        <div class="d-flex flex-column flex-grow-1 g-card-title-section">
                             <div class="d-flex">
                                 <div v-if="selectable">
                                     <slot name="select">
@@ -422,7 +422,7 @@ function onKeyDown(event: KeyboardEvent) {
                             </div>
                         </div>
 
-                        <div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1">
+                        <div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1 flex-shrink-0">
                             <div>
                                 <slot v-if="props.showBookmark" name="bookmark">
                                     <BButton
@@ -747,6 +747,10 @@ function onKeyDown(event: KeyboardEvent) {
         }
     }
 
+    .g-card-title-section {
+        min-width: 50%;
+    }
+
     .g-card-rename {
         visibility: hidden;
     }

client/src/components/Downloads/RecentDownloads.vue

@@ -91,3 +91,9 @@ const breadcrumbItems = [{ title: "Recent Exports & Downloads", to: "/downloads"
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.recent-downloads {
+    container: cards-list / inline-size;
+}
+</style>