From 5f96b801e27c89ac5d9b79aabc2b090018695733 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 16 Nov 2024 16:35:32 +0530
Subject: [PATCH] chore: minor layout fixes

---
 billing/src/components/AppSidebar.vue |  6 ++----
 billing/src/pages/Cards.vue           |  4 ++--
 billing/src/pages/Invoices.vue        |  4 ++--
 billing/src/pages/Overview.vue        | 16 +++++++---------
 billing/src/pages/Plans.vue           |  4 ++--
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/billing/src/components/AppSidebar.vue b/billing/src/components/AppSidebar.vue
index 1d36990faf..b26e07510f 100644
--- a/billing/src/components/AppSidebar.vue
+++ b/billing/src/components/AppSidebar.vue
@@ -6,15 +6,13 @@
 			<UserDropdown class="p-2" />
 		</div>
 		<div class="flex-1 overflow-y-auto">
-			<div class="mb-3 flex flex-col">
+			<nav class="mb-3 flex flex-col">
 				<SidebarLink
 					:label="previousRoute ? 'Back to app' : 'Back'"
 					icon="arrow-left"
 					@click="goBack"
-					class="relative mx-2 my-0.5"
+					class="mx-2 my-0.5"
 				/>
-			</div>
-			<nav class="mb-3 flex flex-col">
 				<SidebarLink
 					v-for="link in links"
 					:icon="link.icon"
diff --git a/billing/src/pages/Cards.vue b/billing/src/pages/Cards.vue
index d9eb551830..11241710a2 100644
--- a/billing/src/pages/Cards.vue
+++ b/billing/src/pages/Cards.vue
@@ -1,10 +1,10 @@
 <template>
-	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5">
+	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
 		<h2 class="text-lg font-semibold text-gray-900 leading-5">
 			{{ 'Cards' }}
 		</h2>
 	</header>
-	<div class="flex h-full flex-col overflow-hidden mx-60 mt-6">
+	<div class="flex flex-col overflow-hidden mx-60 mt-6">
 		<div class="flex justify-end gap-2 mb-3">
 			<Button :loading="cards.loading" @click="cards.reload()">
 				<template #icon>
diff --git a/billing/src/pages/Invoices.vue b/billing/src/pages/Invoices.vue
index afa9fcfbd8..9d3e77fb0a 100644
--- a/billing/src/pages/Invoices.vue
+++ b/billing/src/pages/Invoices.vue
@@ -1,10 +1,10 @@
 <template>
-	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5">
+	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
 		<h2 class="text-lg font-semibold text-gray-900 leading-5">
 			{{ 'Invoices' }}
 		</h2>
 	</header>
-	<div class="flex h-full flex-col overflow-hidden mx-60 mt-6">
+	<div class="flex flex-col overflow-hidden px-60 pt-6">
 		<ListView
 			:columns="columns"
 			:rows="rows"
diff --git a/billing/src/pages/Overview.vue b/billing/src/pages/Overview.vue
index b949e0f471..dfe925c9bb 100644
--- a/billing/src/pages/Overview.vue
+++ b/billing/src/pages/Overview.vue
@@ -1,17 +1,15 @@
 <template>
-	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5">
+	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
 		<h2 class="text-lg font-semibold text-gray-900 leading-5">
 			{{ 'Overview' }}
 		</h2>
 	</header>
-	<div class="flex h-full flex-col overflow-hidden mx-60 mt-6">
-		<div v-if="team.data" class="flex flex-1 flex-col gap-8 overflow-y-auto">
-			<CurrentPlan class="mx-px" @changePlan="router.push({ name: 'Plans' })" />
-			<PaymentDetails />
-		</div>
-		<div v-else class="flex flex-1 items-center justify-center">
-			<Spinner class="size-8" />
-		</div>
+	<div v-if="team.data" class="flex flex-1 flex-col px-60 pt-6 gap-8 overflow-y-auto">
+		<CurrentPlan @changePlan="router.push({ name: 'Plans' })" />
+		<PaymentDetails />
+	</div>
+	<div v-else class="flex flex-1 items-center justify-center">
+		<Spinner class="size-8" />
 	</div>
 </template>
 <script setup>
diff --git a/billing/src/pages/Plans.vue b/billing/src/pages/Plans.vue
index 66c3ec5123..49abc873b7 100644
--- a/billing/src/pages/Plans.vue
+++ b/billing/src/pages/Plans.vue
@@ -1,10 +1,10 @@
 <template>
-	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5">
+	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
 		<h2 class="text-lg font-semibold text-gray-900 leading-5">
 			{{ 'Plans' }}
 		</h2>
 	</header>
-	<div class="flex h-full flex-col overflow-hidden mx-60 mt-6">
+	<div class="flex flex-col overflow-hidden px-60 pt-6">
 		<ListView
 			v-if="rows.length"
 			:columns="columns"