From a30718e4f3547dc2ab0b16c210eb45e2496335c8 Mon Sep 17 00:00:00 2001
From: Takehiro Kitajima <87166470+tkhrktjm@users.noreply.github.com>
Date: Mon, 6 Jul 2026 19:23:17 +0900
Subject: [PATCH 1/3] Add Activity component

---
 src/side-panel/SidePanel.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/side-panel/SidePanel.tsx b/src/side-panel/SidePanel.tsx
index 0baa92a..da84aa5 100644
--- a/src/side-panel/SidePanel.tsx
+++ b/src/side-panel/SidePanel.tsx
@@ -4,7 +4,7 @@
  */
 
 // react
-import { type SyntheticEvent, useEffect, useRef, useState } from "react";
+import { Activity, type SyntheticEvent, useEffect, useRef, useState } from "react";
 import {
   AppBar,
   Box,
@@ -22,7 +22,6 @@ import { SessionPanel } from "@/side-panel/session-panel/SessionPanel.tsx";
 import { SidePanelState } from "@/side-panel/config.ts";
 // tab-panel
 import { a11yProps } from "@/side-panel/utils.ts";
-import { CustomTabPanel } from "@/side-panel/CustomTabPanel.tsx";
 // local
 import type { SessionSummary } from "@/common/models/session-summary.ts";
 
@@ -93,7 +92,7 @@ const SidePanel = ({ tabId, testId }: { tabId: number; testId?: string }) => {
             }}
           />
           <Toolbar />
-          <CustomTabPanel value={tabValue} index={0}>
+          <Activity mode={tabValue === 0 ? "visible" : "hidden"}>
             <RecordPanel
               tabId={tabId}
               panelState={panelState}
@@ -103,8 +102,8 @@ const SidePanel = ({ tabId, testId }: { tabId: number; testId?: string }) => {
               headerHeight={headerHeight}
               testId={testId}
             />
-          </CustomTabPanel>
-          <CustomTabPanel value={tabValue} index={1}>
+          </Activity>
+          <Activity mode={tabValue === 1 ? "visible" : "hidden"}>
             <SessionPanel
               tabId={tabId}
               panelState={panelState}
@@ -114,7 +113,7 @@ const SidePanel = ({ tabId, testId }: { tabId: number; testId?: string }) => {
               headerHeight={headerHeight}
               testId={testId}
             />
-          </CustomTabPanel>
+          </Activity>
         </Box>
       </ThemeProvider>
     </>

From ee0838e6d9468091ffc2f9940e9d30c4e80498e9 Mon Sep 17 00:00:00 2001
From: Takehiro Kitajima <87166470+tkhrktjm@users.noreply.github.com>
Date: Tue, 7 Jul 2026 19:19:16 +0900
Subject: [PATCH 2/3] Limit the scroll range to `<SessionCardList>`

- Save the scroll position for each tab
---
 src/side-panel/record-panel/RecordPanel.tsx   | 34 +++++++++++++++----
 src/side-panel/session-panel/SessionPanel.tsx | 34 +++++++++++++++----
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/side-panel/record-panel/RecordPanel.tsx b/src/side-panel/record-panel/RecordPanel.tsx
index 82b5a46..c6bd9de 100644
--- a/src/side-panel/record-panel/RecordPanel.tsx
+++ b/src/side-panel/record-panel/RecordPanel.tsx
@@ -6,6 +6,7 @@
 // react
 import React, { useEffect, useRef, useState } from "react";
 import { Box } from "@mui/material";
+import { grey } from "@mui/material/colors";
 // side-panel
 import { SessionCardList } from "@/side-panel/session-card/SessionCardList.tsx";
 import { RecordButton } from "@/side-panel/record-panel/RecordButton.tsx";
@@ -121,16 +122,35 @@ const RecordPanel = ({
           />
         </Box>
       </Box>
-      <SessionCardList
-        tabId={tabId}
-        sessionSummaries={sessionSummaries}
-        setSessionSummaries={setSessionSummaries}
-        imported={false}
+      <Box
         sx={{
           marginTop: `${buttonHeight + 8}px`,
+          height: `calc(100vh - ${headerHeight + buttonHeight + 8}px)`,
+          overflowY: "auto",
+          // scrollbar
+          "&::-webkit-scrollbar": {
+            width: "12px", // 8 + 2(left) + 2(right)
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: grey[700],
+            borderRadius: "4px",
+            borderLeft: "2px solid transparent",
+            borderRight: "2px solid transparent",
+            backgroundClip: "padding-box",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: grey[600],
+          },
         }}
-        testId={testId}
-      />
+      >
+        <SessionCardList
+          tabId={tabId}
+          sessionSummaries={sessionSummaries}
+          setSessionSummaries={setSessionSummaries}
+          imported={false}
+          testId={testId}
+        />
+      </Box>
     </>
   );
 };
diff --git a/src/side-panel/session-panel/SessionPanel.tsx b/src/side-panel/session-panel/SessionPanel.tsx
index a49b9c8..2a110de 100644
--- a/src/side-panel/session-panel/SessionPanel.tsx
+++ b/src/side-panel/session-panel/SessionPanel.tsx
@@ -6,6 +6,7 @@
 // react
 import React, { useEffect, useRef, useState } from "react";
 import { Box } from "@mui/material";
+import { grey } from "@mui/material/colors";
 // side-panel
 import { SessionCardList } from "@/side-panel/session-card/SessionCardList.tsx";
 import { LoadButton } from "@/side-panel/session-panel/LoadButton.tsx";
@@ -81,16 +82,35 @@ const SessionPanel = ({
           />
         </Box>
       </Box>
-      <SessionCardList
-        tabId={tabId}
-        sessionSummaries={sessionSummaries}
-        setSessionSummaries={setSessionSummaries}
-        imported={true}
+      <Box
         sx={{
           marginTop: `${buttonHeight + 8}px`,
+          height: `calc(100vh - ${headerHeight + buttonHeight + 8}px)`,
+          overflowY: "auto",
+          // scrollbar
+          "&::-webkit-scrollbar": {
+            width: "12px", // 8 + 2(left) + 2(right)
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: grey[700],
+            borderRadius: "4px",
+            borderLeft: "2px solid transparent",
+            borderRight: "2px solid transparent",
+            backgroundClip: "padding-box",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: grey[600],
+          },
         }}
-        testId={testId}
-      />
+      >
+        <SessionCardList
+          tabId={tabId}
+          sessionSummaries={sessionSummaries}
+          setSessionSummaries={setSessionSummaries}
+          imported={true}
+          testId={testId}
+        />
+      </Box>
     </>
   );
 };

From e064363aac8ee47fd7f389483237e37536bddd50 Mon Sep 17 00:00:00 2001
From: Takehiro Kitajima <87166470+tkhrktjm@users.noreply.github.com>
Date: Tue, 7 Jul 2026 19:31:57 +0900
Subject: [PATCH 3/3] Clean up the code

---
 src/side-panel/CustomTabPanel.tsx | 30 ------------------------------
 src/side-panel/SidePanel.tsx      |  9 +++++++--
 src/side-panel/utils.ts           |  9 +--------
 3 files changed, 8 insertions(+), 40 deletions(-)
 delete mode 100644 src/side-panel/CustomTabPanel.tsx

diff --git a/src/side-panel/CustomTabPanel.tsx b/src/side-panel/CustomTabPanel.tsx
deleted file mode 100644
index fbf77f5..0000000
--- a/src/side-panel/CustomTabPanel.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @copyright Internet Initiative Japan Inc. All rights reserved.
- * @license BSD-3-Clause
- */
-
-// react
-import type { ReactNode } from "react";
-import { Box } from "@mui/material";
-
-interface CustomTabPanelProps {
-  children?: ReactNode;
-  index: number;
-  value: number;
-}
-
-const CustomTabPanel = ({ children, value, index, ...other }: CustomTabPanelProps) => {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box>{children}</Box>}
-    </div>
-  );
-};
-
-export { CustomTabPanel };
diff --git a/src/side-panel/SidePanel.tsx b/src/side-panel/SidePanel.tsx
index da84aa5..b9cc585 100644
--- a/src/side-panel/SidePanel.tsx
+++ b/src/side-panel/SidePanel.tsx
@@ -20,11 +20,16 @@ import { lightGreen } from "@mui/material/colors";
 import { RecordPanel } from "@/side-panel/record-panel/RecordPanel.tsx";
 import { SessionPanel } from "@/side-panel/session-panel/SessionPanel.tsx";
 import { SidePanelState } from "@/side-panel/config.ts";
-// tab-panel
-import { a11yProps } from "@/side-panel/utils.ts";
 // local
 import type { SessionSummary } from "@/common/models/session-summary.ts";
 
+const a11yProps = (index: number) => {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+};
+
 const SidePanel = ({ tabId, testId }: { tabId: number; testId?: string }) => {
   const [panelState, setPanelState] = useState<SidePanelState>(SidePanelState.STOPPED);
   const [sessionSummaries, setSessionSummaries] = useState<SessionSummary[]>([]);
diff --git a/src/side-panel/utils.ts b/src/side-panel/utils.ts
index 7dbfba4..b0202f0 100644
--- a/src/side-panel/utils.ts
+++ b/src/side-panel/utils.ts
@@ -6,13 +6,6 @@
 // react
 import { type EffectCallback, useEffect } from "react";
 
-const a11yProps = (index: number) => {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`,
-  };
-};
-
 const formatRFC3339Date = (d: Date) => {
   if (isNaN(d.valueOf())) return "";
 
@@ -53,4 +46,4 @@ const useEffectOnce = (effect: EffectCallback) => {
   useEffect(effect, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
-export { a11yProps, formatRFC3339, timestamp, useEffectOnce };
+export { formatRFC3339, timestamp, useEffectOnce };