Enhance stop map functionality with new styles and components for better user experience

1 files changed, 52 insertions, 1 deletions

diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css
index 81fba1d..ff09f82 100644
--- a/src/frontend/app/routes/estimates-$id.css
+++ b/src/frontend/app/routes/estimates-$id.css
@@ -1,6 +1,20 @@
+.estimates-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  flex: 1;
+}
+
+.estimates-list-container {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  border-radius: 0.5rem;
+}
+
 .table-responsive {
   overflow-x: auto;
-  margin-bottom: 1.5rem;
 }
 
 .table {
@@ -29,12 +43,20 @@
 }
 
 /* Estimates page specific styles */
+.estimates-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
 .estimates-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem;
   gap: 1rem;
+  flex-shrink: 0;
 }
 
 .manual-refresh-button {
@@ -63,6 +85,32 @@
   transform: none;
 }
 
+.toggle-map-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--primary-color);
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: max-content;
+}
+
+.toggle-map-button:hover:not(:disabled) {
+  background: var(--primary-color-hover);
+  transform: translateY(-1px);
+}
+
+.toggle-map-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .refresh-icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -215,6 +263,7 @@
   gap: 0.5rem;
   flex-wrap: wrap;
   margin-bottom: 1rem;
+  flex-shrink: 0;
 }
 
 .estimates-lines-container.scrollable {
@@ -245,6 +294,7 @@
   padding: 1rem;
   margin-bottom: 1rem;
   color: #856404;
+  flex-shrink: 0;
 }
 
 .experimental-notice strong {
@@ -282,6 +332,7 @@
   color: var(--primary-color);
   font-size: 0.9rem;
   font-weight: 500;
+  flex-shrink: 0;
 }
 
 .refresh-status .refresh-icon {