From a0a4ec59951adeaf46d05c717503206e6ff82934 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Wed, 16 Oct 2024 17:35:01 -0400
Subject: [PATCH 01/16] Scrolling implemented

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 src/App.tsx       | 18 +++++++++++++-----
 src/css/App.css   | 16 +++++++++++++++-
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15d9003..09b83b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,7 @@
         "storybook": "^8.3.4",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.0.1",
-        "vite": "5.4.8"
+        "vite": "^5.4.8"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3857,9 +3857,9 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4781,9 +4781,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4792,7 +4792,7 @@
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
diff --git a/package.json b/package.json
index 1161121..d512f5e 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "storybook": "^8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "5.4.8"
+    "vite": "^5.4.8"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
diff --git a/src/App.tsx b/src/App.tsx
index 545cf7e..5b03075 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,13 +19,21 @@ export default function App() {
           <Navbar />
         </header>
 
-        <div className="main-content">
+        <div className="main-content static">
           <div className="results-container">
-            <div className="table-contain-result">
-              <DataTable data={filteredData} />
-            </div>
 
-            <SearchBar setFilteredData={setFilteredData} />
+            {/* <div className="scrollable">
+              <div className="table-contain-result">
+                <DataTable data={filteredData} />
+              </div>
+            </div> */}
+            <div className="table-contain-result scrollable">
+                <DataTable data={filteredData} />
+              </div>
+
+            <div className="search-bar">
+              <SearchBar setFilteredData={setFilteredData}/>
+            </div>
           </div>
           <div className="preview-contain-result">
             <PreviewCard />
diff --git a/src/css/App.css b/src/css/App.css
index cfa9c85..45071f7 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -1,5 +1,6 @@
 .app-container {
     height: 100vh;
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -13,14 +14,16 @@
 }
 
 .search-bar {
+    width: 30%;
     background-color: #e0e0e0;
     border-radius: 0;
 }
 
 .main-content {
+    height: 100vh;
+    width: 100%;
     display: flex;
     flex: 1;
-    height: 500px;
     padding-top: 50px;
     flex-direction: column;
 }
@@ -30,9 +33,20 @@
     flex-direction: row;
 }
 
+.table-contain-result {
+    width: 70%;
+}
+
 .footer {
     text-align: center;
     background: #9b8b5de5;
     color: white;
 }
 
+.static {
+    position: fixed;
+}
+
+.scrollable {
+    overflow: auto;
+}

From a55803918a13841602f69bfb6746073587c2c92e Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Sun, 20 Oct 2024 17:36:39 -0400
Subject: [PATCH 02/16] Fixed scrollable

---
 src/App.tsx            |  11 +-
 src/css/App.css        |   7 +-
 src/data/sampledata.ts | 406 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 416 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5b03075..4a31bba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,15 +21,12 @@ export default function App() {
 
         <div className="main-content static">
           <div className="results-container">
-
-            {/* <div className="scrollable">
-              <div className="table-contain-result">
-                <DataTable data={filteredData} />
-              </div>
-            </div> */}
-            <div className="table-contain-result scrollable">
+            
+            <div className="table-contain-result scrollable-container">
+              <div className="scrollable">
                 <DataTable data={filteredData} />
               </div>
+            </div>
 
             <div className="search-bar">
               <SearchBar setFilteredData={setFilteredData}/>
diff --git a/src/css/App.css b/src/css/App.css
index 45071f7..f211aa1 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -48,5 +48,10 @@
 }
 
 .scrollable {
-    overflow: auto;
+    overflow-y: auto;
+}
+
+.scrollable-container {
+    height: 700px;
+    overflow-y: auto;
 }
diff --git a/src/data/sampledata.ts b/src/data/sampledata.ts
index e90d100..d7a5ed3 100644
--- a/src/data/sampledata.ts
+++ b/src/data/sampledata.ts
@@ -97,4 +97,410 @@ export const data: MCAPFileInformation[] = [
     notes: "car did not turn on",
     event_type: null,
   },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
+  {
+    id: "01c1e581-6cf9-42f4-a6d0-0c41442fa081",
+    mcap_file_name: "file7.mcap",
+    matlab_file_name: "file7.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did not turn on",
+    event_type: null,
+  },
 ];

From 1058a1e90abef1283cd9d18e182f18bd43f7dc19 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 22 Oct 2024 02:53:38 -0400
Subject: [PATCH 03/16] Table scroll overlap fixed

---
 src/App.tsx     |  7 +++++--
 src/css/App.css | 13 +++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4a31bba..2376760 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,9 +28,12 @@ export default function App() {
               </div>
             </div>
 
-            <div className="search-bar">
-              <SearchBar setFilteredData={setFilteredData}/>
+            <div className="search-bar-container">
+              <div className="search-bar">
+                <SearchBar setFilteredData={setFilteredData}/>
+              </div>
             </div>
+            
           </div>
           <div className="preview-contain-result">
             <PreviewCard />
diff --git a/src/css/App.css b/src/css/App.css
index f211aa1..f56c592 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -14,9 +14,12 @@
 }
 
 .search-bar {
+    width: 100%;
+}
+
+.search-bar-container {
     width: 30%;
     background-color: #e0e0e0;
-    border-radius: 0;
 }
 
 .main-content {
@@ -31,6 +34,8 @@
 .results-container {
     display: flex;
     flex-direction: row;
+    height: 70%;
+    flex-shrink: 0;
 }
 
 .table-contain-result {
@@ -49,9 +54,13 @@
 
 .scrollable {
     overflow-y: auto;
+    flex-shrink: 0;
 }
 
 .scrollable-container {
-    height: 700px;
     overflow-y: auto;
 }
+
+.preview-contain-result {
+    z-index: 1000;
+}

From c18c146aa59ad542fab1805c1f89027405d54790 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 22 Oct 2024 13:02:46 -0400
Subject: [PATCH 04/16] Search bar fill fixed

---
 src/App.tsx     |  8 +++-----
 src/css/App.css | 17 +++++++----------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2376760..04dff8f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,12 +28,10 @@ export default function App() {
               </div>
             </div>
 
-            <div className="search-bar-container">
-              <div className="search-bar">
-                <SearchBar setFilteredData={setFilteredData}/>
-              </div>
+            <div className="search-container scrollable">
+              <SearchBar setFilteredData={setFilteredData}/>
             </div>
-            
+
           </div>
           <div className="preview-contain-result">
             <PreviewCard />
diff --git a/src/css/App.css b/src/css/App.css
index f56c592..cdb6c7b 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -13,15 +13,6 @@
     z-index: 1000;
 }
 
-.search-bar {
-    width: 100%;
-}
-
-.search-bar-container {
-    width: 30%;
-    background-color: #e0e0e0;
-}
-
 .main-content {
     height: 100vh;
     width: 100%;
@@ -39,7 +30,7 @@
 }
 
 .table-contain-result {
-    width: 70%;
+    width: 80%;
 }
 
 .footer {
@@ -64,3 +55,9 @@
 .preview-contain-result {
     z-index: 1000;
 }
+
+.search-container {
+    width: auto;
+    display: flex;
+    justify-content: center;
+}

From a66d29e817422834937fc874bb900a7a56617deb Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 12 Nov 2024 18:17:12 -0500
Subject: [PATCH 05/16] Table width made static, no matter how short or long
 notes are

---
 src/css/Root.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/css/Root.css b/src/css/Root.css
index 098f7dd..b87e2be 100644
--- a/src/css/Root.css
+++ b/src/css/Root.css
@@ -37,6 +37,10 @@
     overflow-y: auto;
     padding-bottom: 10px;
     width: 80%;
+    min-width: 80%;
+    overflow: hidden;
+    word-wrap: break-word; 
+    word-break: break-word;
   }
 
 .footer {

From 9eea14c3572be525fffae93574f8531849aa3790 Mon Sep 17 00:00:00 2001
From: Jasmine <55065445+jyuenbeep@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:51:52 -0800
Subject: [PATCH 06/16] Update Navbar.tsx

---
 src/components/Navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b2cbdaf..065db25 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -28,7 +28,6 @@ export default function Navbar() {
       {links}
 
       {/* Once POST API is out -- Currently WIP */}
-<!--       <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload" /> -->
       <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}

From 98222b992d1144275c97c4a28dd4ba3430e236ae Mon Sep 17 00:00:00 2001
From: Jasmine <55065445+jyuenbeep@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:09:46 -0800
Subject: [PATCH 07/16] Try-catch fixed

---
 src/components/FileUpload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 9bd4b42..88a95ed 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -75,7 +75,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
         console.error("Upload failed:", error);
         setError("An error occurred while uploading. Please try again.");
       }
-    } else {
+    } catch (error) {
       setError("Please select files to upload.");
     }
   };

From 51333856cc10bebd8c3cc9c81b8309b34b8d8eb6 Mon Sep 17 00:00:00 2001
From: Jasmine <55065445+jyuenbeep@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:14:41 -0800
Subject: [PATCH 08/16] Adding bracket

---
 src/components/FileUpload.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 88a95ed..a5c4673 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -78,6 +78,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     } catch (error) {
       setError("Please select files to upload.");
     }
+    }
   };
 
   const toggleModal = () => {

From eea86885375e8d949c1bfbc1f1a908aa7916d97c Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Fri, 6 Dec 2024 13:58:33 -0500
Subject: [PATCH 09/16] Table width has been fixed already for preview
 container

---
 .env                  |  3 ++-
 package-lock.json     | 31 ++++++++++++++++++-------------
 src/css/Root.css      |  2 +-
 src/css/SearchBar.css |  2 +-
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/.env b/.env
index beafddf..e34f230 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-VITE_API_URL=https://api-url:port
\ No newline at end of file
+VITE_API_URL=https://hytechracing.duckdns.org
+ 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ec0dc22..82d1efb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1019,9 +1019,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.0.tgz",
-      "integrity": "sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
+      "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3886,9 +3886,9 @@
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4793,10 +4793,11 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -4817,7 +4818,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -4832,6 +4833,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/debug": {
@@ -6680,9 +6685,9 @@
       "license": "MIT"
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/src/css/Root.css b/src/css/Root.css
index b87e2be..bc29937 100644
--- a/src/css/Root.css
+++ b/src/css/Root.css
@@ -41,7 +41,7 @@
     overflow: hidden;
     word-wrap: break-word; 
     word-break: break-word;
-  }
+}
 
 .footer {
     text-align: center;
diff --git a/src/css/SearchBar.css b/src/css/SearchBar.css
index e4f70bf..2fd3fd0 100644
--- a/src/css/SearchBar.css
+++ b/src/css/SearchBar.css
@@ -4,7 +4,7 @@
   font-size: 15px;
   overflow: auto;
   padding-bottom: 10px;
-  border-left: solid #D1BF80 2px;
+  border-left: solid black 2px;
 }
 
 

From 6c78ffca351675047634e6213cbb91f698efd3c0 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Fri, 6 Dec 2024 16:09:58 -0500
Subject: [PATCH 10/16] Fixed notes length issue in table using Mantine
 components

---
 src/components/DataTable.tsx | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 4b061d7..b1e82dd 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -1,5 +1,6 @@
 import { Table } from "@mantine/core";
 import { useMantineTheme } from "@mantine/core";
+import { Input, Textarea } from "@mantine/core";
 
 interface DataTableProps {
   data?: MCAPFileInformation[];
@@ -17,7 +18,7 @@ export default function DataTable({
   setSelectedData,
 }: DataTableProps) {
   const theme = useMantineTheme();
-  
+
   const setPreviewData = (file: MCAPFileInformation) => {
     if (selectedRow === file.id) {
       setSelectedRow("");
@@ -30,8 +31,10 @@ export default function DataTable({
 
   // Take out when API server team implements filename id in their get route
   const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
-    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
-    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+    const lastDotIndex = fileNameWithExtension.lastIndexOf(".");
+    return lastDotIndex !== -1
+      ? fileNameWithExtension.slice(0, lastDotIndex)
+      : fileNameWithExtension;
   };
 
   const rows = !data ? (
@@ -51,15 +54,32 @@ export default function DataTable({
       <Table.Tr
         key={file.id}
         onClick={() => setPreviewData(file)}
-        
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
+        <Table.Td>
+          {getFileNameWithoutExtension(file.mcap_files[0].file_name)}
+        </Table.Td>
         <Table.Td>{file.date}</Table.Td>
         <Table.Td>{file.location}</Table.Td>
-        
+
         {/* Change back to notes once notes field is implemented in the server */}
-        <Table.Td>{file.car_model}</Table.Td>
+        {/* <Table.Td>{file.car_model}</Table.Td> */}
+        <Table.Td>
+          <Input.Wrapper>
+            <Textarea
+              variant="unstyled"
+              value="
+                    testing long text text text text text text text text text text text text text text text text text text text text text text"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              style={{ whiteSpace: "normal", wordWrap: "break-word" }}
+              readOnly
+              placeholder="Note"
+              rows={4}
+            />
+          </Input.Wrapper>
+        </Table.Td>
       </Table.Tr>
     ))
   );

From e14826268485562ea63d8f818556c652f66b73cd Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 17 Dec 2024 17:10:46 -0500
Subject: [PATCH 11/16] Fixed npm run build

---
 package-lock.json              |  14 ++--
 package.json                   |   2 +-
 src/App.tsx                    |  45 -------------
 src/components/PreviewCard.tsx | 119 +++++++++++++++++++++------------
 4 files changed, 84 insertions(+), 96 deletions(-)
 delete mode 100644 src/App.tsx

diff --git a/package-lock.json b/package-lock.json
index 6d463be..efd10e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@mantine/hooks": "^7.13.1",
         "@tabler/icons-react": "3.17.0",
         "dayjs": "^1.11.13",
-        "nuqs": "^2.2.1",
+        "nuqs": "^2.2.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0",
@@ -6421,9 +6421,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -6493,9 +6493,9 @@
       }
     },
     "node_modules/nuqs": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.1.tgz",
-      "integrity": "sha512-P0swZtg6k9LRXzlT9gQAFtQg25Edan2Evt5vwyGvh00Z+rHH19gb2ZajU/E/SfhwE858aM/jb+wJziWbbwSlcg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.3.tgz",
+      "integrity": "sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==",
       "license": "MIT",
       "dependencies": {
         "mitt": "^3.0.1"
diff --git a/package.json b/package.json
index 40add0d..27e0a47 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@mantine/hooks": "^7.13.1",
     "@tabler/icons-react": "3.17.0",
     "dayjs": "^1.11.13",
-    "nuqs": "^2.2.1",
+    "nuqs": "^2.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 04dff8f..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import "@mantine/core/styles.css";
-import { MantineProvider } from "@mantine/core";
-import { theme } from "@/theme";
-import { data } from "@/data/sampledata";
-import { useState } from "react";
-import Navbar from "@/components/Navbar";
-import SearchBar from "@/components/SearchBar";
-import "@/css/App.css";
-import DataTable from "@/components/DataTable";
-import PreviewCard from "@/components/PreviewCard";
-
-export default function App() {
-  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
-
-  return (
-    <MantineProvider theme={theme}>
-      <div className="app-container">
-        <header className="navbar">
-          <Navbar />
-        </header>
-
-        <div className="main-content static">
-          <div className="results-container">
-            
-            <div className="table-contain-result scrollable-container">
-              <div className="scrollable">
-                <DataTable data={filteredData} />
-              </div>
-            </div>
-
-            <div className="search-container scrollable">
-              <SearchBar setFilteredData={setFilteredData}/>
-            </div>
-
-          </div>
-          <div className="preview-contain-result">
-            <PreviewCard />
-          </div>
-        </div>
-      </div>
-
-      {/* <PreviewCard /> */}
-    </MantineProvider>
-  );
-}
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 3f22b0b..fae3f14 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -29,34 +29,39 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
   const [success, setSuccess] = useState<string | null>(null);
 
   const handleDelete = async () => {
-    setLoading(true)
+    setLoading(true);
     setError(null);
-    setSuccess(null)
+    setSuccess(null);
     try {
-        const response = await fetch(`${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`, {
-          method: 'DELETE',
-        });
+      const response = await fetch(
+        `${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`,
+        {
+          method: "DELETE",
+        },
+      );
 
-        if (!response.ok) {
-          if (response.status === 503) {
-            const errorMsg = await response.text();
-            setError(`Failed to delete: ${errorMsg} \nTry again in a few minutes!`);
-          } else {
-            const errorMsg = await response.text();
-            setError(`Failed to delete: ${errorMsg}`);
-          }
+      if (!response.ok) {
+        if (response.status === 503) {
+          const errorMsg = await response.text();
+          setError(
+            `Failed to delete: ${errorMsg} \nTry again in a few minutes!`,
+          );
         } else {
-          const result = await response.json();
-          setSuccess('File deleted successfully!');
-          console.log('Delete successful:', result);
+          const errorMsg = await response.text();
+          setError(`Failed to delete: ${errorMsg}`);
         }
+      } else {
+        const result = await response.json();
+        setSuccess("File deleted successfully!");
+        console.log("Delete successful:", result);
+      }
     } catch (error) {
-      console.error('Error sending Delete request:', error);
-      setError('An error occurred during file deletion.');
+      console.error("Error sending Delete request:", error);
+      setError("An error occurred during file deletion.");
     }
-    setLoading(false)
-  }
-  
+    setLoading(false);
+  };
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleDateString("en-US", {
@@ -69,30 +74,30 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
 
   // Take out when API server team implements filename id in their get route
   const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
-    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
-    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+    const lastDotIndex = fileNameWithExtension.lastIndexOf(".");
+    return lastDotIndex !== -1
+      ? fileNameWithExtension.slice(0, lastDotIndex)
+      : fileNameWithExtension;
   };
 
-  const imageUrl = selectedData?.content_files?.vn_lat_lon_plot?.[0]?.signed_url ?? "https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"; // Fallback to a default image if none exists.
-  
+  const imageUrl =
+    selectedData?.content_files?.vn_lat_lon_plot?.[0]?.signed_url ??
+    "https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"; // Fallback to a default image if none exists.
+
   const formatTime = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleTimeString("en-US", {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: true, 
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: true,
     });
   };
   return (
     <div className="preview-container">
       <Grid>
         <Grid.Col span={3} className="image-column">
-          <img
-            src={imageUrl}
-            alt="Preview"
-            className="preview-image"
-          />
+          <img src={imageUrl} alt="Preview" className="preview-image" />
         </Grid.Col>
         <Grid.Col span={3} className="image-column">
           <img
@@ -158,13 +163,26 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
             }}
           >
             <div className="previewFileButtons">
-              <DownloadButton buttonText="MAT" />
-              <DownloadButton buttonText="MCAP" />
+              <DownloadButton
+                buttonText="MAT"
+                fileName={selectedData?.mcap_file_name ?? ""}
+                signedUrl={selectedData?.signed_url ?? null}
+              />
+              <DownloadButton
+                buttonText="MCAP"
+                fileName={selectedData?.mcap_file_name ?? ""}
+                signedUrl={selectedData?.signed_url ?? null}
+              />
             </div>
           </div>
           {selectedData ? (
             <>
-              <PreviewDataDiv name={getFileNameWithoutExtension(selectedData.mcap_files[0].file_name)} val={""} />
+              <PreviewDataDiv
+                name={getFileNameWithoutExtension(
+                  selectedData.mcap_files[0].file_name,
+                )}
+                val={""}
+              />
               <PreviewDataDiv
                 name={"Car Model"}
                 val={selectedData.car_model ?? "NA"}
@@ -210,19 +228,34 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
                       signedUrl={item.signed_url}
                     />
                   ))}
-                  <Button loading={loading} loaderProps={{ type: 'dots' }} size="compact-md" color="red" onClick={handleDelete}>Delete</Button>
+                  <Button
+                    loading={loading}
+                    loaderProps={{ type: "dots" }}
+                    size="compact-md"
+                    color="red"
+                    onClick={handleDelete}
+                  >
+                    Delete
+                  </Button>
                   {success && (
-                    <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
+                    <Notification
+                      color="green"
+                      onClose={() => setSuccess(null)}
+                      style={{ marginTop: 10 }}
+                    >
                       {success}
                     </Notification>
                   )}
                   {error && (
-                    <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+                    <Notification
+                      color="red"
+                      onClose={() => setError(null)}
+                      style={{ marginTop: 10 }}
+                    >
                       {error}
                     </Notification>
                   )}
                 </div>
-                
               </div>
             </>
           ) : (
@@ -291,7 +324,7 @@ export function DownloadButton({
       <Menu.Dropdown>
         <Menu.Item
           style={{
-            fontSize: '10px',
+            fontSize: "10px",
           }}
           leftSection={
             <IconFile
@@ -344,7 +377,7 @@ export const SchemaTable = () => {
           handleSearch(e.target.value);
         }}
       />
-      <ScrollArea style={{ height: 180, width: 250 , padding: 10}}>
+      <ScrollArea style={{ height: 180, width: 250, padding: 10 }}>
         {" "}
         {/* Scrollable area with height limit */}
         <Table

From 5bce9350e8d91abdb3a149fa268e4e4a29d66949 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 7 Jan 2025 19:30:44 -0500
Subject: [PATCH 12/16] Fixing pr

---
 .env                         |  2 +-
 src/components/DataTable.tsx | 20 ++++++++------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/.env b/.env
index ea302a4..6b0d9d4 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_API_URL=api-url:port
+VITE_API_URL=https://hytechracing.duckdns.org
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 1c5a4b2..513a547 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -56,7 +56,7 @@ export default function DataTable({
         onClick={() => setPreviewData(file)}
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>
+        <Table.Td style={{ paddingLeft: "50px" }}>
           {getFileNameWithoutExtension(file.mcap_files[0].file_name)}
         </Table.Td>
         <Table.Td>{file.date}</Table.Td>
@@ -64,23 +64,19 @@ export default function DataTable({
 
         {/* Change back to notes once notes field is implemented in the server */}
         {/* <Table.Td>{file.car_model}</Table.Td> */}
-        <Table.Td>
+        <Table.Td style={{ paddingRight: "50px" }}>
           <Input.Wrapper>
             <Textarea
               variant="unstyled"
-              value="
-                    testing long text text text text text text text text text text text text text text text text text text text text text text"
-              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
-              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
-              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              value={file.notes}
               style={{ whiteSpace: "normal", wordWrap: "break-word" }}
               readOnly
-              placeholder="Note"
-              rows={4}
+              placeholder="No Note Available"
+              minRows={1}
+              maxRows={4}
             />
           </Input.Wrapper>
         </Table.Td>
-        
       </Table.Tr>
     ))
   );
@@ -97,10 +93,10 @@ export default function DataTable({
       >
         <Table.Thead bg={"#D1BF80"}>
           <Table.Tr>
-            <Table.Th>Name</Table.Th>
+            <Table.Th style={{ paddingLeft: "50px" }}>Name</Table.Th>
             <Table.Th>Date</Table.Th>
             <Table.Th>Location</Table.Th>
-            <Table.Th>Notes</Table.Th>
+            <Table.Th style={{ paddingRight: "50px" }}>Notes</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>{rows}</Table.Tbody>

From c002066653600f1c9f861c40bfae844e37294ae9 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 7 Jan 2025 19:45:24 -0500
Subject: [PATCH 13/16] Adjusted padding pixels

---
 src/components/DataTable.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 513a547..2da86b2 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -56,7 +56,7 @@ export default function DataTable({
         onClick={() => setPreviewData(file)}
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td style={{ paddingLeft: "50px" }}>
+        <Table.Td style={{ paddingLeft: "25px" }}>
           {getFileNameWithoutExtension(file.mcap_files[0].file_name)}
         </Table.Td>
         <Table.Td>{file.date}</Table.Td>
@@ -64,7 +64,7 @@ export default function DataTable({
 
         {/* Change back to notes once notes field is implemented in the server */}
         {/* <Table.Td>{file.car_model}</Table.Td> */}
-        <Table.Td style={{ paddingRight: "50px" }}>
+        <Table.Td style={{ paddingRight: "25px" }}>
           <Input.Wrapper>
             <Textarea
               variant="unstyled"
@@ -93,10 +93,10 @@ export default function DataTable({
       >
         <Table.Thead bg={"#D1BF80"}>
           <Table.Tr>
-            <Table.Th style={{ paddingLeft: "50px" }}>Name</Table.Th>
+            <Table.Th style={{ paddingLeft: "25px" }}>Name</Table.Th>
             <Table.Th>Date</Table.Th>
             <Table.Th>Location</Table.Th>
-            <Table.Th style={{ paddingRight: "50px" }}>Notes</Table.Th>
+            <Table.Th style={{ paddingRight: "25px" }}>Notes</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>{rows}</Table.Tbody>

From ddfebe5ea75ac11878b0b378e66c3d72ea458369 Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Tue, 7 Jan 2025 19:49:06 -0500
Subject: [PATCH 14/16] Changing .env file back

---
 .env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env b/.env
index 6b0d9d4..ea302a4 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_API_URL=https://hytechracing.duckdns.org
+VITE_API_URL=api-url:port

From a70cdf4667f88c44d9943898f724e9fdaf1e51cd Mon Sep 17 00:00:00 2001
From: Jasmine Yuen <jyuen30@stuy.edu>
Date: Mon, 20 Jan 2025 11:08:11 -0500
Subject: [PATCH 15/16] Fixing issues

---
 package.json                 | 2 +-
 src/components/DataTable.tsx | 8 ++++++--
 src/css/Root.css             | 4 ++--
 src/css/SearchBar.css        | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 27e0a47..40add0d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@mantine/hooks": "^7.13.1",
     "@tabler/icons-react": "3.17.0",
     "dayjs": "^1.11.13",
-    "nuqs": "^2.2.3",
+    "nuqs": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 2da86b2..c0dcb89 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -56,11 +56,15 @@ export default function DataTable({
         onClick={() => setPreviewData(file)}
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td style={{ paddingLeft: "25px" }}>
+        <Table.Td style={{ paddingLeft: "25px", size: "xs" }}>
           {getFileNameWithoutExtension(file.mcap_files[0].file_name)}
         </Table.Td>
         <Table.Td>{file.date}</Table.Td>
-        <Table.Td>{file.location}</Table.Td>
+        <Table.Td style={{ size: "xs" }}>
+          <Input.Wrapper>
+            <Textarea minRows={1} maxRows={4} value={file.location} />
+          </Input.Wrapper>
+        </Table.Td>
 
         {/* Change back to notes once notes field is implemented in the server */}
         {/* <Table.Td>{file.car_model}</Table.Td> */}
diff --git a/src/css/Root.css b/src/css/Root.css
index bc29937..184cb76 100644
--- a/src/css/Root.css
+++ b/src/css/Root.css
@@ -36,8 +36,8 @@
     flex-grow: 1;
     overflow-y: auto;
     padding-bottom: 10px;
-    width: 80%;
-    min-width: 80%;
+    width: 60%;
+    min-width: 60%;
     overflow: hidden;
     word-wrap: break-word; 
     word-break: break-word;
diff --git a/src/css/SearchBar.css b/src/css/SearchBar.css
index 2fd3fd0..e4f70bf 100644
--- a/src/css/SearchBar.css
+++ b/src/css/SearchBar.css
@@ -4,7 +4,7 @@
   font-size: 15px;
   overflow: auto;
   padding-bottom: 10px;
-  border-left: solid black 2px;
+  border-left: solid #D1BF80 2px;
 }
 
 

From 19b13c7b102efefb79365e7b5ccce414181b1c01 Mon Sep 17 00:00:00 2001
From: Jasmine <55065445+jyuenbeep@users.noreply.github.com>
Date: Mon, 20 Jan 2025 08:17:31 -0800
Subject: [PATCH 16/16] Update PreviewCard.tsx

---
 src/components/PreviewCard.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index d706c5f..49fbe51 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -33,12 +33,9 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
     setError(null);
     setSuccess(null);
     try {
-      const response = await fetch(
-        `${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`,
-        {
-          method: "DELETE",
-        },
-      );
+        const response = await fetch(`${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`, {
+          method: 'DELETE',
+        });
 
         if (!response.ok) {
           if (response.status === 503) {
@@ -53,14 +50,9 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
         } else {
           setSuccess('File deleted successfully!');
         }
-      } else {
-        const result = await response.json();
-        setSuccess("File deleted successfully!");
-        console.log("Delete successful:", result);
-      }
     } catch (error) {
-      console.error("Error sending Delete request:", error);
-      setError("An error occurred during file deletion.");
+      console.error('Error sending Delete request:', error);
+      setError('An error occurred during file deletion.');
     }
     setLoading(false);
   };