changes

public/styles.css

@@ -24,8 +24,7 @@
 
 .qrcode-image {
   object-fit: contain;
-  width: 80%; /* Adjust as needed */
-  height: 80%;
+  grid-column:2;
 }
 
 /* Close button */
@@ -37,24 +36,25 @@
   cursor: pointer;
 }
 
+.grid {
+}
+
 
 /* General Reset */
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  display: flex; /* Ensure the body uses a flex container */
+  display: grid;
+  grid-template-columns: 1fr 3fr;
   height: 100vh; /* Full viewport height */
 }
 
 /* Sidebar (Nav Links) */
 .nav-links {
-  width: 250px; /* Set a fixed width for the sidebar */
   background-color: #f4f4f4; /* Light gray background */
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Add a slight shadow for separation */
-  display: flex;
-  flex-direction: column; /* Ensure items stack vertically */
-  justify-content: flex-start; /* Optional: adjust spacing of items */
+  grid-column: 1;
   min-height: 100vh; /* Stretch to full viewport height */
 }
 
@@ -77,6 +77,7 @@ body {
 }
 
 .content {
+  grid-column: 2;
   flex-grow: 1; /* Allow content to fill the remaining space */
   padding: 20px;
 }