From e8542982ec888effbeba21587517dfaf9bd96ae7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 18 Aug 2023 20:03:20 +0530
Subject: [PATCH] style: responsive empty state for profile stats

---
 .../components/profile/overview/priority-distribution.tsx   | 6 +++---
 apps/app/components/profile/overview/state-distribution.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/profile/overview/priority-distribution.tsx b/apps/app/components/profile/overview/priority-distribution.tsx
index 40acdedf550..d72985285dd 100644
--- a/apps/app/components/profile/overview/priority-distribution.tsx
+++ b/apps/app/components/profile/overview/priority-distribution.tsx
@@ -12,10 +12,10 @@ type Props = {
 };
 
 export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) => (
-  <div className="space-y-2">
+  <div className="flex flex-col space-y-2">
     <h3 className="text-lg font-medium">Issues by Priority</h3>
     {userProfile ? (
-      <div className="border border-custom-border-100 rounded">
+      <div className="flex-grow border border-custom-border-100 rounded">
         {userProfile.priority_distribution.length > 0 ? (
           <BarGraph
             data={userProfile.priority_distribution.map((priority) => ({
@@ -63,7 +63,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
             }}
           />
         ) : (
-          <div className="p-7">
+          <div className="flex-grow p-7">
             <ProfileEmptyState
               title="No Data yet"
               description="Create issues to view the them by priority in the graph for better analysis."
diff --git a/apps/app/components/profile/overview/state-distribution.tsx b/apps/app/components/profile/overview/state-distribution.tsx
index 5d283aeec63..77ec8e596fc 100644
--- a/apps/app/components/profile/overview/state-distribution.tsx
+++ b/apps/app/components/profile/overview/state-distribution.tsx
@@ -16,9 +16,9 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
   if (!userProfile) return null;
 
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col space-y-2">
       <h3 className="text-lg font-medium">Issues by State</h3>
-      <div className="border border-custom-border-100 rounded p-7">
+      <div className="flex-grow border border-custom-border-100 rounded p-7">
         {userProfile.state_distribution.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6">
             <div>