From affb9cbf1fe0b76dac40e001d86ea91bd8d28bfc Mon Sep 17 00:00:00 2001
From: Samuel Chau <sayheysantiago@proton.me>
Date: Wed, 18 Jun 2025 07:06:50 +0930
Subject: [PATCH] sytle: number input / tab viewer (#208)

* style(scoring-tab): revert width back to 6 digit length

* style(tabs): left allign desktop view
---
 frontend/src/components/profile/scoring/AdvancedView.jsx    | 1 +
 frontend/src/components/profile/scoring/BasicView.jsx       | 1 +
 frontend/src/components/profile/scoring/UpgradeSettings.jsx | 3 +++
 frontend/src/components/ui/Modal.jsx                        | 4 ++--
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/profile/scoring/AdvancedView.jsx b/frontend/src/components/profile/scoring/AdvancedView.jsx
index 2cfd114..1948fb6 100644
--- a/frontend/src/components/profile/scoring/AdvancedView.jsx
+++ b/frontend/src/components/profile/scoring/AdvancedView.jsx
@@ -71,6 +71,7 @@ const AdvancedView = ({formats, onScoreChange, onFormatRemove, showRemoveButton}
                                                 onChange={value =>
                                                     onScoreChange(format.id, value)
                                                 }
+                                                className="w-24"
                                             />
                                             {showRemoveButton && (
                                                 <button
diff --git a/frontend/src/components/profile/scoring/BasicView.jsx b/frontend/src/components/profile/scoring/BasicView.jsx
index a72d305..a64037f 100644
--- a/frontend/src/components/profile/scoring/BasicView.jsx
+++ b/frontend/src/components/profile/scoring/BasicView.jsx
@@ -55,6 +55,7 @@ const BasicView = ({formats, onScoreChange, onFormatRemove, showRemoveButton}) =
                                     onChange={value =>
                                         onScoreChange(format.id, value)
                                     }
+                                    className="w-24"
                                 />
                                 {showRemoveButton && (
                                     <button
diff --git a/frontend/src/components/profile/scoring/UpgradeSettings.jsx b/frontend/src/components/profile/scoring/UpgradeSettings.jsx
index 93c2f6a..8bc2c39 100644
--- a/frontend/src/components/profile/scoring/UpgradeSettings.jsx
+++ b/frontend/src/components/profile/scoring/UpgradeSettings.jsx
@@ -27,6 +27,7 @@ const UpgradeSettings = ({
                     <NumberInput
                         value={minCustomFormatScore}
                         onChange={onMinScoreChange}
+                        className="w-20"
                     />
                 </div>
 
@@ -49,6 +50,7 @@ const UpgradeSettings = ({
                                 value={upgradeUntilScore}
                                 onChange={onUpgradeUntilScoreChange}
                                 min={0}
+                                className="w-20"
                             />
                         </div>
 
@@ -68,6 +70,7 @@ const UpgradeSettings = ({
                                 value={minScoreIncrement}
                                 onChange={onMinIncrementChange}
                                 min={0}
+                                className="w-20"
                             />
                         </div>
                     </>
diff --git a/frontend/src/components/ui/Modal.jsx b/frontend/src/components/ui/Modal.jsx
index 5eed595..0f4115a 100644
--- a/frontend/src/components/ui/Modal.jsx
+++ b/frontend/src/components/ui/Modal.jsx
@@ -140,7 +140,7 @@ const Modal = ({
                         {title}
                     </h3>
                     {tabs && (
-                        <div className='ml-auto mr-3'>
+                        <div className='ml-auto mr-3 md:ml-4 md:mr-auto'>
                             <TabViewer
                                 tabs={tabs}
                                 activeTab={activeTab}
@@ -150,7 +150,7 @@ const Modal = ({
                     )}
                     <button
                         onClick={handleClose}
-                        className={`${tabs ? '' : 'ml-auto'} text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors`}>
+                        className='text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors'>
                         <svg
                             className='w-6 h-6'
                             fill='none'