From 9c05fdb9b93f59a34a9d0ecc77788f93c606a2b1 Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <da.nguyen8744@gmail.com>
Date: Fri, 19 Sep 2025 16:01:20 -0400
Subject: [PATCH] Update Employee functionalities: create/edit page layout
 changes

---
 templates/create_employee.html | 44 ++++++++++++++++++++++++++++++----
 templates/edit_employee.html   | 32 ++++++++++++++++++-------
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/templates/create_employee.html b/templates/create_employee.html
index 80e5253..a34146e 100644
--- a/templates/create_employee.html
+++ b/templates/create_employee.html
@@ -7,7 +7,7 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/employees.css') }}">
 <style>
 .form-container {
-  max-width: 800px;
+  max-width: 1400px;
   margin: 0 auto;
   background: #ffffff;
   border-radius: 0.75rem;
@@ -15,6 +15,40 @@
   overflow: hidden;
 }
 
+/* UPDATE the .form-row to better utilize wider space: */
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+/* ADD new responsive breakpoints for better layout: */
+@media (max-width: 1200px) {
+  .form-container {
+    max-width: 1000px;
+  }
+  
+  .form-row {
+    gap: 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .form-container {
+    max-width: 90%;
+    margin: 0 1rem;
+  }
+  
+  .form-row {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
 .form-header {
   background: #f8fafc;
   padding: 1.5rem;
@@ -47,11 +81,11 @@
 }
 
 .form-body {
-  padding: 2rem;
+  padding: 3rem;
 }
 
 .form-group {
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 .form-group:last-child {
@@ -72,8 +106,8 @@
 }
 
 .form-input {
-  width: 50%;
-  padding: 0.75rem 1rem;
+  width: 70%;
+  padding: 1rem 1.25rem;
   border: 2px solid #e2e8f0;
   border-radius: 0.5rem;
   font-size: 1rem;
diff --git a/templates/edit_employee.html b/templates/edit_employee.html
index d0281cd..3ff7c33 100644
--- a/templates/edit_employee.html
+++ b/templates/edit_employee.html
@@ -6,7 +6,7 @@
 />
 <style>
   .form-container {
-    max-width: 800px;
+    max-width: 1400px;
     margin: 0 auto;
     background: #ffffff;
     border-radius: 0.75rem;
@@ -70,11 +70,11 @@
   }
 
   .form-body {
-    padding: 2rem;
+    padding: 3rem;
   }
 
   .form-group {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
   }
 
   .form-group:last-child {
@@ -95,8 +95,8 @@
   }
 
   .form-input {
-    width: 50%;
-    padding: 0.75rem 1rem;
+    width: 75%;
+    padding: 1rem 1.25rem;
     border: 2px solid #e2e8f0;
     border-radius: 0.5rem;
     font-size: 1rem;
@@ -131,14 +131,30 @@
   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1rem;
+    gap: 2rem;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 1200px) {
+    .form-container {
+      max-width: 1000px;
+    }
+    
+    .form-row {
+      gap: 1.5rem;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .form-container {
+      max-width: 90%;
+      margin: 0 1rem;
+    }
+    
     .form-row {
       grid-template-columns: 1fr;
+      gap: 1rem;
     }
-
+    
     .form-actions {
       flex-direction: column;
     }