From 58437afd55e2b91acee5da4c130faceca389ae18 Mon Sep 17 00:00:00 2001
From: NotMatta <xlenderboy666@gmail.com>
Date: Fri, 20 Dec 2024 16:02:05 +0100
Subject: [PATCH] chrome ui fixes

---
 src/components/page-components/side.tsx |  4 ++--
 src/index.css                           | 21 +++++++++++++++++++++
 src/routes/media-browse.tsx             |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/page-components/side.tsx b/src/components/page-components/side.tsx
index a80dbdd..2f80d10 100644
--- a/src/components/page-components/side.tsx
+++ b/src/components/page-components/side.tsx
@@ -4,12 +4,12 @@ import { useState } from "react"
 const Side = ({data}:{data:{Media:MediaType}}) => {
     const [showMore,setShowMore] = useState<boolean>(false)
     return(
-        <div className="h-[200px] mb-[20px] lg:mb-0 lg:h-full shrink-0 lg:min-w-[400px] lg:max-w-[400px] 2xl:max-w-[450px] 2xl:min-w-[450px] lg:overflow-y-scroll relative lg:bg-black lg:text-white flex flex-col lg:overflow-hidden">
+        <div className="h-[200px] mb-[20px] lg:mb-0 lg:h-full shrink-0 lg:min-w-[400px] lg:max-w-[400px] 2xl:max-w-[450px] 2xl:min-w-[450px] relative lg:bg-black lg:text-white flex flex-col lg:overflow-hidden">
             <img src={data.Media.coverImage.extraLarge}
                 alt="" className="hidden w-full min-h-[450px] lg:block h-full object-cover absolute top-0"/>
             <img src={data.Media.bannerImage || "https://i.pinimg.com/originals/88/20/ff/8820ff7553baaf595822b58c5590b604.jpg"}
                 alt="" className="w-full h-full lg:hidden object-cover absolute top-0 overflow"/>
-            <div className="h-full max-h-full w-full lg:hidden p-2 z-10 bg-gradient-to-b from-transparent to-[rgba(0,0,0,0.7)] flex items-end">
+            <div className="h-full w-full absolute top-0 left-0 lg:hidden p-2 z-10 bg-gradient-to-b from-transparent to-[rgba(0,0,0,0.7)] flex items-end">
                 <div className="flex items-end gap-2 absolute">
                     <img src={data.Media.coverImage.extraLarge} alt={data.Media.title.romaji}
                     className="lg:hidden min-w-24 min-h-38 max-h-48 max-w-30 w-1/4 h-1/4 object-cover rounded translate-y-8 shadow shadow-black"/>
diff --git a/src/index.css b/src/index.css
index 1c9b990..22fd8ff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,3 +7,24 @@
 body {
   font-family: 'Inter', sans-serif;
 }
+
+body div::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 5px;
+	background-color: rgba(0,0,0,.1);
+}
+
+body div::-webkit-scrollbar
+{
+	width: 4px;
+    height: 4px;
+	background-color: rgba(0,0,0,.1);
+}
+
+body div::-webkit-scrollbar-thumb
+{
+	border-radius: 5px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #555;
+}
diff --git a/src/routes/media-browse.tsx b/src/routes/media-browse.tsx
index 2d02170..62c8338 100644
--- a/src/routes/media-browse.tsx
+++ b/src/routes/media-browse.tsx
@@ -6,7 +6,7 @@ const MediaBrowse = ({initType}:{initType:string}) => {
     const [page,setPage] = useState({anime:(initType == "anime"),manga:(initType == "manga")}); //to prevent spam
     return(
         <div className="flex flex-col gap-2 p-4 h-full">
-            <div className="flex items-center gap-2 text-3xl">
+            <div className="flex items-center gap-2 lg:text-3xl">
                 <label htmlFor="type">Browse:</label>
                 <select name="type" id="type" className="p-2 rounded-xl bg-[rgba(0,0,0,0.5)]" value={type} onChange={(e) => {
                     if(e.target.value == "ANIME") setPage({...page,anime:true})