From 2de1849057cf8a3e56ef64311a66714ea5a1619c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1niel=20K?=
 <51174697+DanCodernaut@users.noreply.github.com>
Date: Thu, 15 May 2025 20:43:35 +0200
Subject: [PATCH 1/3] fix(responsive): improve layout on ultrawide screens (#9)

---
 app/(root)/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 50ce850..2ee1b0e 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -138,7 +138,7 @@ const SubscriptionTracker: FC = () => {
 
   return (
     <div className="min-h-screen px-4 py-6 sm:p-8 md:p-10 pb-28 md:pb-10 flex items-center justify-center bg-dark-500">
-      <div className="card-border w-full max-w-5xl h-[calc(100vh-4rem)] sm:h-[calc(80vh-4rem)] md:h-[calc(70vh-4rem)] lg:h-[calc(60vh-4rem)]">
+      <div className="card-border w-full max-w-5xl min-h-[500px] max-h-[800px] h-[min(calc(100vh-4rem),900px)] sm:h-[min(calc(80vh-4rem),800px)] md:h-[min(calc(70vh-4rem),700px)] lg:h-[min(calc(60vh-4rem),700px)] border-3 border-red-500">
         <div className="card p-3 sm:p-5 md:p-7 h-full flex flex-col">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-7 border-b border-light-600/20 pb-3 sm:pb-5 gap-3 sm:gap-0">
             {/* Sign Out button */}

From ab940a687c8814b2a7b551ad07766949815759fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1niel=20K?=
 <51174697+DanCodernaut@users.noreply.github.com>
Date: Thu, 15 May 2025 20:51:06 +0200
Subject: [PATCH 2/3] fix(responsive): improve layout on ultrawide screens (#9)

---
 app/(root)/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 2ee1b0e..4804323 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -138,7 +138,7 @@ const SubscriptionTracker: FC = () => {
 
   return (
     <div className="min-h-screen px-4 py-6 sm:p-8 md:p-10 pb-28 md:pb-10 flex items-center justify-center bg-dark-500">
-      <div className="card-border w-full max-w-5xl min-h-[500px] max-h-[800px] h-[min(calc(100vh-4rem),900px)] sm:h-[min(calc(80vh-4rem),800px)] md:h-[min(calc(70vh-4rem),700px)] lg:h-[min(calc(60vh-4rem),700px)] border-3 border-red-500">
+      <div className="card-border w-full max-w-5xl min-h-[500px] max-h-[800px] h-[min(calc(100vh-4rem),900px)] sm:h-[min(calc(80vh-4rem),800px)] md:h-[min(calc(70vh-4rem),700px)] lg:h-[min(calc(60vh-4rem),700px)]">
         <div className="card p-3 sm:p-5 md:p-7 h-full flex flex-col">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-7 border-b border-light-600/20 pb-3 sm:pb-5 gap-3 sm:gap-0">
             {/* Sign Out button */}

From 8a94050029f589e040aebaeeaa8302c86246d7c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1niel=20K?=
 <51174697+DanCodernaut@users.noreply.github.com>
Date: Thu, 15 May 2025 20:51:25 +0200
Subject: [PATCH 3/3] fix(layout): reduce spacing in table layout (#10)

---
 app/(root)/tabs/subscription-tab/SubscriptionTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/(root)/tabs/subscription-tab/SubscriptionTable.tsx b/app/(root)/tabs/subscription-tab/SubscriptionTable.tsx
index 53977b0..8061b32 100644
--- a/app/(root)/tabs/subscription-tab/SubscriptionTable.tsx
+++ b/app/(root)/tabs/subscription-tab/SubscriptionTable.tsx
@@ -86,10 +86,10 @@ const SubscriptionTable: FC<SubscriptionTableProps> = ({
 
   return (
     <div className="overflow-x-auto">
-      <Table className="border-collapse w-full min-w-[650px]">
+      <Table className="border-collapse w-full min-w-full">
         <TableHeader>
           <TableRow className="bg-dark-300/70 border-b border-light-600/20">
-            <TableHead className="text-light-100 w-14 sm:w-20 font-medium text-xs sm:text-sm">#</TableHead>
+            <TableHead className="text-light-100 w-10 sm:w-14 font-medium text-xs sm:text-sm">#</TableHead>
             <TableHead className="text-light-100 font-medium text-xs sm:text-sm">Subscription</TableHead>
             <TableHead className="text-light-100 font-medium text-xs sm:text-sm">Price</TableHead>
             <TableHead className="text-light-100 font-medium text-xs sm:text-sm">Renewal Date</TableHead>