Merge pull request #2561 from PrefectHQ/dashboard-responsive-enhancem…

…ents Make the dashboard cards more responsive
PrefectHQ · Jun 27, 2024 · c687181 · c687181
2 parents 99f04c3 + c708bbe
commit c687181
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/components/DashboardWorkPoolCard.vue b/src/components/DashboardWorkPoolCard.vue
@@ -87,6 +87,7 @@
   p-3
   border-b
   border-default
+  flex-wrap
 }
 
 .dashboard-work-pool-card__name { @apply
@@ -98,13 +99,15 @@
 
 .dashboard-work-pool-card__mini-bars { @apply
   w-1/5
+  shrink-0
   h-6
 }
 
 .dashboard-work-pool-card__details { @apply
   p-3
   grid
-  grid-cols-4
+  grid-cols-2
+  sm:grid-cols-4
   gap-y-2
 }
 

diff --git a/src/components/FlowRunsAccordionHeader.vue b/src/components/FlowRunsAccordionHeader.vue
@@ -67,12 +67,12 @@
   grid
   gap-0.5
   grid-cols-1
+  text-left
 }
 
 .flow-runs-accordion-header__time { @apply
   text-xs
   text-subdued
-  text-left
 }
 
 .flow-runs-accordion-header__count { @apply

diff --git a/src/components/WorkspaceDashboardFlowRunsCard.vue b/src/components/WorkspaceDashboardFlowRunsCard.vue
@@ -8,8 +8,10 @@
         <StatisticKeyValue label="total" :value="count" />
       </template>
     </header>
-    <FlowRunsBarChart class="workspace-dashboard-flow-runs-card__chart" :filter="flowRunsFilter" />
-    <FlowRunStateTypeTabs :filter="flowRunsFilter" />
+    <p-content>
+      <FlowRunsBarChart class="workspace-dashboard-flow-runs-card__chart" :filter="flowRunsFilter" />
+      <FlowRunStateTypeTabs :filter="flowRunsFilter" />
+    </p-content>
   </p-card>
 </template>