From 605a87558e2001bb0b5ededc524b430a31397dd3 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Mon, 10 Jul 2023 01:55:13 +0900
Subject: [PATCH] feat: remove scrollbar

---
 src/components/column/Column.tsx         |  6 ++----
 src/components/column/ColumnSettings.tsx |  6 ++----
 src/index.css                            | 17 -----------------
 3 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/column/Column.tsx b/src/components/column/Column.tsx
index f8c57d3..5ec318f 100644
--- a/src/components/column/Column.tsx
+++ b/src/components/column/Column.tsx
@@ -57,9 +57,7 @@ const Column: Component<ColumnProps> = (props) => {
           fallback={
             <>
               <div class="shrink-0 border-b">{props.header}</div>
-              <div class="scrollbar flex flex-col overflow-y-scroll scroll-smooth">
-                {props.children}
-              </div>
+              <div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div>
             </>
           }
         >
@@ -76,7 +74,7 @@ const Column: Component<ColumnProps> = (props) => {
                   <div>ホームに戻る</div>
                 </button>
               </div>
-              <ul class="scrollbar flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
+              <ul class="flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
                 <TimelineContentDisplay timelineContent={timeline} />
               </ul>
             </div>
diff --git a/src/components/column/ColumnSettings.tsx b/src/components/column/ColumnSettings.tsx
index 98d8e9f..b5a2b01 100644
--- a/src/components/column/ColumnSettings.tsx
+++ b/src/components/column/ColumnSettings.tsx
@@ -19,14 +19,12 @@ type ColumnSettingsSectionProps = {
   children: JSX.Element;
 };
 
-const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => {
-  return (
+const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => (
     <div class="flex flex-col gap-2 border-b p-2">
       <div>{props.title}</div>
       <div>{props.children}</div>
     </div>
   );
-};
 
 const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
   const i18n = useTranslation();
@@ -45,7 +43,7 @@ const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
   return (
     <div class="flex flex-col border-t">
       <ColumnSettingsSection title={i18n()('column.config.columnWidth')}>
-        <div class="scrollbar flex h-9 gap-2 overflow-x-scroll">
+        <div class="flex h-9 gap-2 overflow-x-scroll">
           <button
             class="rounded-md border px-4 hover:bg-stone-100"
             onClick={() => setColumnWidth('widest')}
diff --git a/src/index.css b/src/index.css
index 7d722d4..4445102 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,20 +38,3 @@ em-emoji-picker {
   width: 360px;
   max-width: 90vw;
 }
-
-.scrollbar::-webkit-scrollbar:vertical {
-  width: 8px;
-}
-.scrollbar::-webkit-scrollbar:horizontal {
-  height: 8px;
-}
-.scrollbar::-webkit-scrollbar {
-  background-color: #fbf9f9;
-}
-.scrollbar::-webkit-scrollbar-thumb {
-  background-color: #fce9ec;
-  border-radius: 8px;
-}
-.scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: #fcd9dc;
-}