From cfa85b9ee9e484b816779729941ed550cb42cbb3 Mon Sep 17 00:00:00 2001
From: LiebeAnnette <liebeannette@gmail.com>
Date: Fri, 6 Jun 2025 15:04:16 -0500
Subject: [PATCH] Expense blocks stretch to screen width in one column instead
 of off-center. Added CSS only

---
 client/styles/expenseManager.css | 51 +++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/client/styles/expenseManager.css b/client/styles/expenseManager.css
index e1d3ea2..a6feb49 100644
--- a/client/styles/expenseManager.css
+++ b/client/styles/expenseManager.css
@@ -87,4 +87,53 @@
 
 .folder-error {
   color: red;
-}
\ No newline at end of file
+}
+/* RESPONSIVE IMPROVEMENTS */
+
+@media (max-width: 768px) {
+  .expense-form {
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .expense-input {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .bubble-button-wrapper {
+    width: 100%;
+  }
+
+  .bubble-button {
+    width: 100%;
+    text-align: center;
+  }
+
+  .bubble-button button {
+    width: 100%;
+  }
+
+  .folder-grid {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .folder-wrapper {
+    flex: 1 1 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .expense-title {
+    font-size: 1.5rem;
+  }
+
+  .bubble-button {
+    padding: 0.5rem;
+  }
+
+  .bubble-button button {
+    font-size: 0.95rem;
+  }
+}