From 449f9d71ef31acde04b7418873950e019bb85e8e Mon Sep 17 00:00:00 2001
From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com>
Date: Thu, 27 Nov 2025 11:35:25 +0700
Subject: [PATCH] =?UTF-8?q?remove=20thanh=20scroll=20v=C3=A0=20chuy?=
 =?UTF-8?q?=E1=BB=83n=20SN=20xu=E1=BB=91ng=20PID?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FRONTEND/src/App.tsx                 | 25 ++++++++++++++++++++++---
 FRONTEND/src/components/CardLine.tsx |  7 ++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index af6fbe0..3f08729 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -3,6 +3,7 @@ import "@mantine/dates/styles.css";
 import "@mantine/notifications/styles.css";
 import "./App.css";
 import classes from "./App.module.css";
+import componentClasses from "./components/Component.module.css";
 
 import {
   Suspense,
@@ -487,14 +488,32 @@ function App() {
                     borderRadius: 8,
                   }}
                 >
-                  <ScrollArea h={expandedBottomBar ? "68vh" : "85vh"}>
+                  <ScrollArea
+                    h={expandedBottomBar ? "68vh" : "85vh"}
+                    type="scroll"
+                    scrollbars="y"
+                    style={{ overflowX: "hidden" }}
+                    className={componentClasses.hideScrollBar}
+                  >
                     {station.lines.length > 0 ? (
-                      <Grid gutter="md" style={{ margin: 0 }}>
+                      <Grid
+                        gutter="md"
+                        style={{
+                          margin: 0,
+                          width: "100%",
+                          overflowX: "hidden",
+                        }}
+                      >
                         {station.lines.map((line, i) => (
                           <Grid.Col
                             key={i}
                             span={3}
-                            style={{ display: "flex", height: "100%" }}
+                            style={{
+                              display: "flex",
+                              height: "100%",
+                              maxWidth: "100%",
+                              overflow: "hidden",
+                            }}
                           >
                             <CardLine
                               socket={socket}
diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index 10746d6..c2de65d 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -212,7 +212,7 @@ const CardLine = ({
                   </Box>
                 </Flex>
                 <Box w={"100%"}>
-                  <Flex justify={"space-between"} w={"100%"}>
+                  <Flex direction={"column"} gap={"4px"} w={"100%"}>
                     <div className={classes.info_line}>
                       PID:{" "}
                       <Text
@@ -238,10 +238,7 @@ const CardLine = ({
                         ""
                       )}
                     </div>
-                    <div
-                      className={classes.info_line}
-                      style={{ width: "120px" }}
-                    >
+                    <div className={classes.info_line}>
                       SN:{" "}
                       <Text
                         onClick={(e) => {