formated scan page

py_app/app/static/style.css

@@ -6,9 +6,8 @@ body {
 }
 
 .container {
-    width: 95%;
-    margin: 15px auto; /* Add 15px top margin */
-    overflow: hidden;
+    width: 100%; /* Ensure it spans the full width */
+    margin: 0 auto; /* Center the container */
     padding: 0; /* Remove padding */
     background: none; /* Remove white background */
     border-radius: 0; /* Remove rounded corners */
@@ -230,8 +229,8 @@ body.dark-mode .card {
 
 /* Common card styles */
 .card {
-    flex: 1 1 500px; /* Allow cards to grow and shrink, with a base width of 500px */
-    max-width: 500px; /* Ensure cards don't exceed 500px in width */
+    flex: 1 1 auto; /* Allow cards to grow and shrink */
+    max-width: none; /* Remove any fixed width */
     background: #fff;
     border-radius: 5px;
     padding: 20px;
@@ -515,64 +514,44 @@ body.dark-mode .scan-table tr:nth-child(odd) {
 
 /* Container for the scan page */
 .scan-container {
-    display: flex;
-    flex-wrap: wrap; /* Allow wrapping on smaller screens */
-    gap: 20px; /* Add 20px spacing between the cards */
-    margin: 20px auto; /* Center the container vertically and horizontally */
-    justify-content: center; /* Center the cards horizontally */
-    align-items: stretch; /* Make all cards the same height */
+    display: grid;
+    grid-template-columns: 1fr 2fr; /* 1/3 and 2/3 layout */
+    gap: 20px; /* Add spacing between the columns */
+    margin: 20px auto;
+    max-width: 100%; /* Ensure it spans the full width */
+    width: 100%; /* Ensure it takes full width */
+    align-items: flex-start; /* Align items at the top */
+    overflow-x: hidden; /* Prevent horizontal overflow */
+    box-sizing: border-box; /* Include padding and borders in width calculations */
 }
 
 /* Input Form Card */
 .scan-form-card {
-    flex: 0 0 500px; /* Fixed width of 500px */
-    max-width: 500px;
     background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column; /* Ensure content inside the card is vertically aligned */
 }
 
 /* Latest Scans Card */
 .scan-table-card {
-    flex: 2 1 1000px; /* Take up twice the space compared to other cards */
-    max-width: 1000px; /* Ensure the card doesn't exceed 1000px in width */
     background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     overflow-x: auto; /* Allow horizontal scrolling for the table */
-    display: flex;
-    flex-direction: column; /* Ensure content inside the card is vertically aligned */
-}
-
-/* Table styles */
-.scan-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-
-.scan-table th, .scan-table td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: center;
-}
-
-.scan-table th {
-    background-color: #f4f4f4;
-    font-weight: bold;
+    width: 100%; /* Ensure it takes the full width of its grid column */
+    max-width: 100%; /* Prevent it from exceeding the container width */
+    box-sizing: border-box; /* Include padding and borders in width calculations */
 }
 
 /* Media query for smaller screens */
 @media (max-width: 768px) {
-    .card {
-        flex: 1 1 100%; /* Make cards take full width on smaller screens */
+    .scan-container {
+        grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
     }
 
     .scan-form-card, .scan-table-card {
-        flex: 1 1 100%; /* Make both cards take full width on smaller screens */
+        width: 100%; /* Make both cards take full width */
     }
 }

py_app/requirements.txt

@@ -1,6 +1,6 @@
-Flask==2.2.2
-Flask-SSLify==0.1.5
-Werkzeug==2.2.2
-gunicorn==20.1.0
-flask-sqlalchemy==2.5.1
-pyodbc==4.0.0
+Flask
+Flask-SSLify
+Werkzeug
+gunicorn
+flask-sqlalchemy
+pyodbc