From 6534af45168762d3184c24c42dac148302dfca9b Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Mon, 16 Feb 2026 02:05:24 -0500
Subject: [PATCH] feat: Refine Control Panel styling with adjusted padding,
 margins, and button sizes for improved layout and usability

---
 client/src/components/ControlPanel.css | 54 ++++++++++++++------------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/client/src/components/ControlPanel.css b/client/src/components/ControlPanel.css
index a680e3f..759436a 100644
--- a/client/src/components/ControlPanel.css
+++ b/client/src/components/ControlPanel.css
@@ -247,7 +247,7 @@
 
 .turtle-details {
   flex: 1;
-  padding: 2.5rem;
+  padding: 1.5rem;
   overflow-y: auto;
   background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
 }
@@ -314,8 +314,8 @@
 }
 
 .detail-section {
-  margin-bottom: 2rem;
-  padding: 1.75rem;
+  margin-bottom: 1.25rem;
+  padding: 1.25rem;
   background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
   border-radius: 0.75rem;
   border: 1px solid #334155;
@@ -329,8 +329,8 @@
 }
 
 .detail-section h3 {
-  font-size: 1.375rem;
-  margin-bottom: 1.25rem;
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
   color: #60a5fa;
   font-weight: 700;
   display: flex;
@@ -384,15 +384,15 @@
 .command-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
 .command-btn {
-  padding: 0.875rem 1rem;
+  padding: 0.625rem 0.75rem;
   border: none;
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -400,7 +400,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  white-space: nowrap;
 }
 
 .command-btn:hover {
@@ -449,30 +450,30 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
+  gap: 0.375rem;
+  padding: 0.75rem;
   background: #1e293b;
   border-radius: 0.5rem;
 }
 
 .movement-row {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.375rem;
   justify-content: center;
 }
 
 .movement-row.vertical {
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .movement-controls button {
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
   border: 2px solid #334155;
   background: #0f172a;
   color: #60a5fa;
-  border-radius: 0.5rem;
-  font-size: 1.5rem;
+  border-radius: 0.375rem;
+  font-size: 1.25rem;
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
@@ -495,19 +496,24 @@
 .action-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .action-btn {
-  padding: 1rem;
+  padding: 0.625rem 0.75rem;
   border: 2px solid #334155;
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
+  background: #0f172a;
+  color: #60a5fa;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  color: white;
-  background: #1e293b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  white-space: nowrap;
 }
 
 .action-btn:hover {