From 506dca4e7e2afe9c7dbdbfc52348b21b2ebafe40 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 6 Jan 2026 22:40:46 +0000
Subject: [PATCH] added "BREATHING_ROOM"

---
 packages/frontend/src/Index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index 0494174..e3a6e77 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -22,6 +22,8 @@ import {
 import { ResizablePanel, ResizablePanelGroup, ResizableSeparator } from "@/components/ui/resizable";
 import { issue, organisation, project } from "@/lib/server";
 
+const BREATHING_ROOM = 1;
+
 function Index() {
     const userData = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
 
@@ -174,10 +176,10 @@ function Index() {
     }, [selectedProject]);
 
     return (
-        <main className="w-full h-screen flex flex-col">
+        <main className={`w-full h-screen flex flex-col gap-${BREATHING_ROOM} p-${BREATHING_ROOM}`}>
             {/* header area */}
-            <div className="flex gap-12 items-center justify-between p-1">
-                <div className="flex gap-1 items-center">
+            <div className="flex gap-12 items-center justify-between">
+                <div className={`flex gap-${BREATHING_ROOM} items-center`}>
                     {/* organisation selection */}
                     <OrganisationSelect
                         organisations={organisations}
@@ -220,7 +222,7 @@ function Index() {
                         />
                     )}
                 </div>
-                <div className="flex gap-1 items-center">
+                <div className={`flex gap-${BREATHING_ROOM} items-center`}>
                     <DropdownMenu>
                         <DropdownMenuTrigger className="text-sm">
                             <SmallUserDisplay user={user} />
@@ -246,7 +248,7 @@ function Index() {
                                     trigger={
                                         <Button
                                             variant="ghost"
-                                            className="flex w-full gap-2 items-center justify-end text-end px-2 py-1 m-0 h-auto"
+                                            className="flex w-full items-center justify-end text-end px-2 py-1 m-0 h-auto"
                                             title="Server Configuration"
                                         >
                                             Server Configuration
@@ -264,7 +266,7 @@ function Index() {
             </div>
 
             {/* main body */}
-            <div className="w-full h-full flex items-start justify-between p-1 gap-1">
+            <div className={`w-full h-full flex items-start justify-between gap-${BREATHING_ROOM}`}>
                 {selectedProject && issues.length > 0 && (
                     <ResizablePanelGroup>
                         <ResizablePanel id={"left"} minSize={400}>