fix: align dashboard column heights (#13332)

frontend/src/components/card-with-header/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="{ 'fill-height': fill }">
         <el-card :style="{ height: height }" class="home-card">
             <div class="header">
                 <div class="header-left flex flex-wrap gap-3">
@@ -22,10 +22,38 @@ defineOptions({ name: 'CardWithHeader' });
 defineProps({
     header: String,
     height: String,
+    fill: Boolean,
 });
 </script>
 
 <style scoped lang="scss">
+.fill-height {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+
+    .home-card {
+        flex: 1;
+        min-height: 0;
+
+        :deep(.el-card__body) {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .header {
+            flex-shrink: 0;
+        }
+
+        .body-content {
+            flex: 1;
+            min-height: 0;
+        }
+    }
+}
+
 .home-card {
     .header {
         display: flex;

frontend/src/views/home/app/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <CardWithHeader :header="$t('app.app')" class="card-interval" v-loading="loading">
+    <div class="app-launcher">
+        <CardWithHeader :header="$t('app.app')" class="card-interval" v-loading="loading" fill>
             <template #header-r>
                 <el-popover placement="left" :width="226" trigger="click">
                     <el-input size="small" v-model="filter" clearable @input="loadOption()" />
@@ -28,7 +28,7 @@
                 </el-popover>
             </template>
             <template #body>
-                <el-scrollbar height="536px" class="moz-height">
+                <el-scrollbar class="app-scrollbar moz-height">
                     <div class="h-app-card" v-for="(app, index) in apps" :key="index">
                         <el-row :gutter="5">
                             <el-col :span="5" class="h-app-media-col">
@@ -244,6 +244,26 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.app-launcher {
+    min-height: 0;
+}
+
+.app-scrollbar {
+    height: 536px;
+}
+
+@media only screen and (min-width: 992px) {
+    .app-launcher {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .app-scrollbar {
+        height: 100%;
+        min-height: 0;
+    }
+}
+
 .h-app-card {
     padding: 8px 10px;
     margin: 0 4px 3px 0;
@@ -407,8 +427,10 @@ defineExpose({
 
 /* FOR MOZILLA */
 @-moz-document url-prefix() {
-    .moz-height {
-        height: 524px;
+    @media only screen and (max-width: 991px) {
+        .moz-height {
+            height: 524px;
+        }
     }
 }
 </style>

frontend/src/views/home/index.vue

@@ -165,7 +165,7 @@
                     </template>
                 </CardWithHeader>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="dashboard-right">
                 <el-carousel
                     class="my-carousel"
                     :class="{ 'no-indicator': carouselItemCount <= 1 }"
@@ -426,7 +426,7 @@
                     </el-carousel-item>
                 </el-carousel>
 
-                <AppLauncher ref="appRef" class="card-interval" />
+                <AppLauncher ref="appRef" class="card-interval dashboard-app" />
             </el-col>
         </el-row>
 
@@ -1155,6 +1155,19 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
+@media only screen and (min-width: 992px) {
+    .dashboard-right {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    .dashboard-app {
+        flex: 1;
+        min-height: 0;
+    }
+}
+
 .h-overview {
     text-align: center;