From 67ac9e075f0ca1cfe7e4766d9168815d7ab600fa Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Sun, 3 Jan 2021 13:50:28 +0000
Subject: [PATCH] fix(frontend): fix sliders overflowing on firefox

fixes #566
---
 src/components/Layout/index.tsx | 27 ++++++++++++---------------
 src/components/Slider/index.tsx | 10 +++++-----
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 63845e305..0cf00bb89 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -18,18 +18,18 @@ const Layout: React.FC = ({ children }) => {
   const router = useRouter();
 
   return (
-    <div className="min-h-full h-full flex bg-gray-900">
+    <div className="flex h-full min-w-0 min-h-full bg-gray-900">
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
-      <div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
-        <div className="z-10 flex-shrink-0 flex h-16 bg-gray-600 shadow fixed right-0 left-0 md:left-64">
+      <div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 md:ml-64">
+        <div className="fixed left-0 right-0 z-10 flex flex-shrink-0 h-16 bg-gray-600 shadow md:left-64">
           <button
-            className="px-4 border-r border-gray-800 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
+            className="px-4 text-gray-200 border-r border-gray-800 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
             aria-label="Open sidebar"
             onClick={() => setSidebarOpen(true)}
           >
             <svg
-              className="h-6 w-6"
+              className="w-6 h-6"
               stroke="currentColor"
               fill="none"
               viewBox="0 0 24 24"
@@ -42,7 +42,7 @@ const Layout: React.FC = ({ children }) => {
               />
             </svg>
           </button>
-          <div className="flex-1 px-4 flex justify-between">
+          <div className="flex justify-between flex-1 px-4">
             <SearchInput />
             <div className="flex items-center md:ml-6">
               <LanguagePicker />
@@ -51,18 +51,15 @@ const Layout: React.FC = ({ children }) => {
           </div>
         </div>
 
-        <main
-          className="relative z-0 top-16 focus:outline-none right-0"
-          tabIndex={0}
-        >
+        <main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
           <div className="pt-2 pb-6">
-            <div className="max-w-8xl mx-auto px-4">
+            <div className="px-4 mx-auto max-w-8xl">
               {router.pathname === '/' && hasPermission(Permission.ADMIN) && (
-                <div className="rounded-md bg-indigo-700 p-4 mt-2">
+                <div className="p-4 mt-2 bg-indigo-700 rounded-md">
                   <div className="flex">
                     <div className="flex-shrink-0">
                       <svg
-                        className="h-5 w-5 text-white"
+                        className="w-5 h-5 text-white"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 20 20"
                         fill="currentColor"
@@ -74,14 +71,14 @@ const Layout: React.FC = ({ children }) => {
                         />
                       </svg>
                     </div>
-                    <div className="ml-3 flex-1 md:flex md:justify-between">
+                    <div className="flex-1 ml-3 md:flex md:justify-between">
                       <p className="text-sm leading-5 text-white">
                         <FormattedMessage {...messages.alphawarning} />
                       </p>
                       <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
                         <a
                           href="http://github.com/sct/overseerr"
-                          className="whitespace-nowrap font-medium text-indigo-100 hover:text-white transition ease-in-out duration-150"
+                          className="font-medium text-indigo-100 transition duration-150 ease-in-out whitespace-nowrap hover:text-white"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 32fe30823..743894df5 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -160,7 +160,7 @@ const Slider: React.FC<SliderProps> = ({
 
   return (
     <div className="relative">
-      <div className="absolute flex text-gray-400 right-0 -mt-10">
+      <div className="absolute right-0 flex -mt-10 text-gray-400">
         <button
           className={`${
             scrollPos.isStart ? 'cursor-not-allowed text-gray-800' : ''
@@ -207,14 +207,14 @@ const Slider: React.FC<SliderProps> = ({
         </button>
       </div>
       <div
-        className="relative overflow-x-scroll whitespace-nowrap hide-scrollbar overscroll-x-contain -ml-4 -mr-4 px-2 overflow-y-auto"
+        className="relative px-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain"
         ref={containerRef}
         onScroll={onScroll}
       >
         {items?.map((item, index) => (
           <div
             key={`${sliderKey}-${index}`}
-            className="px-2 inline-block align-top"
+            className="inline-block px-2 align-top"
           >
             {item}
           </div>
@@ -223,13 +223,13 @@ const Slider: React.FC<SliderProps> = ({
           [...Array(10)].map((_item, i) => (
             <div
               key={`placeholder-${i}`}
-              className="px-2 inline-block align-top"
+              className="inline-block px-2 align-top"
             >
               {placeholder}
             </div>
           ))}
         {isEmpty && (
-          <div className="text-center text-white mt-16 mb-16">
+          <div className="mt-16 mb-16 text-center text-white">
             {emptyMessage ? (
               emptyMessage
             ) : (