From e3c2da36df37bb558c594fa74929fd2ee7bdba74 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Mon, 20 May 2024 21:56:36 -0500
Subject: [PATCH] style: always show scrollbar (#215)

* style: always show scrollbar

* fix: hide header scrollbar in specific instances

* hotfix: prettier fail

* style: always show scrollbar

* fix: hide header scrollbar in specific instances
---
 src/stories/components/List.stories.tsx       |  1 +
 src/views/components/calendar/Calendar.tsx    |  6 +++---
 .../components/calendar/CalendarFooter.tsx    |  2 +-
 .../components/calendar/CalenderHeader.tsx    |  4 ++--
 .../ExtensionRoot/ExtensionRoot.module.scss   | 21 +++++++++++++++++++
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/stories/components/List.stories.tsx b/src/stories/components/List.stories.tsx
index 39b85a0a..6beb0706 100644
--- a/src/stories/components/List.stories.tsx
+++ b/src/stories/components/List.stories.tsx
@@ -97,6 +97,7 @@ export const Default: Story = {
         children: generateCourseBlocks,
         itemKey: item => item.uniqueId,
         gap: 12,
+        onReordered: () => {},
     },
     render: args => (
         <div className='w-sm'>
diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx
index 0633e680..580dfeb5 100644
--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -72,8 +72,8 @@ export default function Calendar(): JSX.Element {
             />
             <div className='h-full flex overflow-auto pl-3'>
                 {showSidebar && (
-                    <div className='h-full flex flex-none flex-col justify-between pb-5 pl-4.5 screenshot:hidden'>
-                        <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pt-5'>
+                    <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
+                        <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pl-4.5 pt-5'>
                             <CalendarSchedules />
                             <Divider orientation='horizontal' size='100%' className='my-5' />
                             <ImportantLinks />
@@ -83,7 +83,7 @@ export default function Calendar(): JSX.Element {
                         <CalendarFooter />
                     </div>
                 )}
-                <div className='h-full min-w-4xl flex flex-grow flex-col overflow-y-auto'>
+                <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
                     <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
                         <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                     </div>
diff --git a/src/views/components/calendar/CalendarFooter.tsx b/src/views/components/calendar/CalendarFooter.tsx
index c58325bb..f308e057 100644
--- a/src/views/components/calendar/CalendarFooter.tsx
+++ b/src/views/components/calendar/CalendarFooter.tsx
@@ -12,7 +12,7 @@ import Link from '../common/Link';
  */
 export default function CalendarFooter(): JSX.Element {
     return (
-        <footer className='min-w-full w-0 space-y-2'>
+        <footer className='min-w-full w-0 pl-4.5 space-y-2'>
             <div className='flex gap-2'>
                 <Link className='linkanimate' href='#'>
                     <InstagramIcon className='h-6 w-6' />
diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalenderHeader.tsx
index 252efa05..7b91aa51 100644
--- a/src/views/components/calendar/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalenderHeader.tsx
@@ -34,7 +34,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
     const [activeSchedule] = useSchedules();
 
     return (
-        <div className='flex items-center gap-5 border-b border-ut-offwhite px-7 py-4'>
+        <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
             <Button
                 variant='single'
                 icon={MenuIcon}
@@ -51,7 +51,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                     totalCourses={activeSchedule.courses.length}
                 />
                 <div className='flex items-center gap-1 screenshot:hidden'>
-                    <Text variant='mini' className='text-ut-gray font-normal'>
+                    <Text variant='mini' className='text-nowrap text-ut-gray font-normal'>
                         DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                     </Text>
                     <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
index 7a54f131..3bac792e 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -18,3 +18,24 @@
         cursor: move;
     }
 }
+
+::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    border: 3px solid #fff;
+    border-radius: 7px;
+    min-height: 40px;
+    box-shadow: none;
+    background: rgb(218, 220, 224);
+}
+:hover::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover {
+    background: rgb(189, 193, 198);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: rgb(128, 134, 139);
+}