From 46fc8b601686da30eb9405efd435aa7e7ba0e05b Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 15 Dec 2024 15:52:07 +0530
Subject: [PATCH 1/3] decrease size

---
 packages/app/components/ScoreContainer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index c81446f12..650925a45 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -21,7 +21,7 @@ interface ScoreProgressChartProps {
 
 const ScoreProgressChart: React.FC<ScoreProgressChartProps> = ({
   score,
-  size = 150,
+  size = 120,
   strokeWidth = 10,
 }) => {
   if (!score) return null;
@@ -81,7 +81,7 @@ interface GradingPieChartProps {
 }
 const GradingPieChart: React.FC<GradingPieChartProps> = ({
   scores,
-  size = 150,
+  size = 120,
   strokeWidth = 10,
 }) => {
   if (!scores) return null;
@@ -107,7 +107,7 @@ const GradingPieChart: React.FC<GradingPieChartProps> = ({
   return (
     <RStack style={styles.container}>
       <RStack style={styles.graphWrapper}>
-        <Svg height="150" width="150" viewBox="0 0 180 180">
+        <Svg height="120" width="120" viewBox="0 0 180 180">
           {total === 0 ? (
             <Circle
               cx="50%"

From 0fd75a07965b3212675f2523a8214284890086b9 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Sun, 15 Dec 2024 16:22:46 +0530
Subject: [PATCH 2/3] add flexWrap

---
 packages/app/components/ScoreContainer.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 650925a45..19ce706cc 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -21,7 +21,7 @@ interface ScoreProgressChartProps {
 
 const ScoreProgressChart: React.FC<ScoreProgressChartProps> = ({
   score,
-  size = 120,
+  size = 150,
   strokeWidth = 10,
 }) => {
   if (!score) return null;
@@ -81,7 +81,7 @@ interface GradingPieChartProps {
 }
 const GradingPieChart: React.FC<GradingPieChartProps> = ({
   scores,
-  size = 120,
+  size = 150,
   strokeWidth = 10,
 }) => {
   if (!scores) return null;
@@ -107,7 +107,7 @@ const GradingPieChart: React.FC<GradingPieChartProps> = ({
   return (
     <RStack style={styles.container}>
       <RStack style={styles.graphWrapper}>
-        <Svg height="120" width="120" viewBox="0 0 180 180">
+        <Svg height="150" width="150" viewBox="0 0 180 180">
           {total === 0 ? (
             <Circle
               cx="50%"
@@ -217,7 +217,10 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
             style={{
               flex: 1,
               flexDirection: media.gtXs ? 'column' : 'row',
-              gap: 15,
+              flexWrap: 'wrap',
+              gap: 30,
+              justifyContent: 'center',
+              alignItems: 'center',
             }}
           >
             <ScoreProgressChart score={totalScore} />

From e7b3993fcac482d166789c70109bef3aee09d2a2 Mon Sep 17 00:00:00 2001
From: Anmol Verma <anmolverma2810@gmail.com>
Date: Mon, 16 Dec 2024 15:44:29 +0530
Subject: [PATCH 3/3] increase gap

---
 packages/app/components/ScoreContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/components/ScoreContainer.tsx b/packages/app/components/ScoreContainer.tsx
index 19ce706cc..190c6eb98 100644
--- a/packages/app/components/ScoreContainer.tsx
+++ b/packages/app/components/ScoreContainer.tsx
@@ -12,6 +12,7 @@ import {
 } from 'app/hooks/score';
 import { View } from 'react-native';
 import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ScoreProgressChartProps {
   score: number;
@@ -187,6 +188,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
 
   const handleScoreClick = useCalculateStore(id, type);
   const media = useMedia();
+  const { sm } = useResponsive();
 
   return (
     <RStack style={styles.box}>
@@ -218,7 +220,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
               flex: 1,
               flexDirection: media.gtXs ? 'column' : 'row',
               flexWrap: 'wrap',
-              gap: 30,
+              gap: sm ? 50 : 20,
               justifyContent: 'center',
               alignItems: 'center',
             }}