Design fixes

Author: carinhbrander

public/app.js

@@ -292,19 +292,16 @@ function displayResults() {
             <div class="route-jobs">
                 ${route.steps
                   .map((job) => {
-                    if (job.type === 'start') {
-                      return `<div class="job-item"><span>start</span></div>`
-                    } else if (job.type === 'end') {
-                      return `<div class="job-item"><span>end</span></div>`
-                    } else {
-                      return `<div class="job-item">
-                        <span>${job.description}</span>
+                    return `<div class="job-item">
+                        <span>${
+                          job.description ??
+                          (job.type === 'start' ? 'Start' : 'Slut')
+                        }</span>
                         <span class="job-location">${job.duration.toFixed(
                           1
                         )} min</span>
                     </div>
                     `
-                    }
                   })
 
                   .join('')}

public/index.html

@@ -34,7 +34,7 @@ <h3><i class="fas fa-truck"></i> Fordon</h3>
                 </div>
 
                 <div class="sidebar-section">
-                    <h3><i class="fas fa-map-marker-alt"></i> Jobb</h3>
+                    <h3><i class="fas fa-map-marker-alt"></i> Kollegor</h3>
                     <div id="jobsList" class="list-container">
                         <!-- Jobs will be populated here -->
                     </div>
@@ -55,7 +55,7 @@ <h3><i class="fas fa-map-marker-alt"></i> Jobb</h3>
 
                 <!-- Results Panel -->
                 <div id="resultsPanel" class="results-panel hidden">
-                    <h3><i class="fas fa-chart-line"></i> Optimering Resultat</h3>
+                    <h3><i class="fas fa-chart-line"></i> Optimeringsesultat</h3>
                     <div id="resultsContent">
                         <!-- Results will be populated here -->
                     </div>

public/styles.css

@@ -112,6 +112,8 @@ body {
 
 .sidebar-section {
   margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar-section:last-child {
@@ -128,7 +130,6 @@ body {
 }
 
 .list-container {
-  max-height: 300px;
   overflow-y: auto;
   margin-bottom: 1rem;
   border: 1px solid #e9ecef;
@@ -308,65 +309,6 @@ body {
   font-weight: 500;
 }
 
-/* Modal */
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-}
-
-.modal-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid #e9ecef;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-header h3 {
-  color: #495057;
-  margin: 0;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #6c757d;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-close:hover {
-  color: #dc3545;
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
 /* Form Styles */
 .form-group {
   margin-bottom: 1rem;