chore: make settings container wider on desktop

compsci-adl · Feb 24, 2024 · 9789fe0 · 9789fe0
1 parent 06cf029
commit 9789fe0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx
@@ -10,7 +10,7 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
     const selected = currentTab === tabName;
     return (
         <button
-            className={`text-left ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
+            className={`text-left md:text-right ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
             onClick={() => {
                 if (!selected) {
                     onTabChange(tabName);
@@ -29,8 +29,8 @@ interface SidebarProps {
 
 export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
     return (
-        <div className="flex flex-col md:flex-row md:justify-between">
-            <div className="flex flex-col gap-y-4">
+        <div className="flex flex-col md:flex-row md:place-content-end">
+            <div className="mr-4 flex flex-col gap-y-4">
                 {TAB_NAMES.map((tab, i) => (
                     <SidebarTab
                         currentTab={currentTab}

diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx
@@ -25,7 +25,7 @@ export default async function SettingsPage() {
             <div className="flex justify-center">
                 <Title colour="purple">Settings</Title>
             </div>
-            <section className="w-full max-w-lg">
+            <section className="w-full max-w-[62rem]">
                 <FancyRectangle colour="purple" offset="8" filled fullWidth>
                     <div className="z-0 grid w-full border-4 border-black bg-white p-8 text-black md:grid-cols-3 md:p-12">
                         {exists ? (

diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx
@@ -56,7 +56,7 @@ export default function MembershipSettings({
                         type="submit"
                         colour="orange"
                         onClick={handlePayment}
-                        width="w-full"
+                        width="w-full md:w-42"
                         size="small"
                         loading={pay.isMutating}
                     >