fix overflow scroll

zizdlp · Sep 21, 2024 · 878329f · 878329f
1 parent bcd6e3d
commit 878329f
Show file tree

Hide file tree

Showing 21 changed files with 87 additions and 31 deletions.
diff --git a/zbook_frontend/src/components/WarningDialog.tsx b/zbook_frontend/src/components/WarningDialog.tsx
@@ -18,8 +18,12 @@ export default function WarngingDialog({
 }) {
   return (
     <DialogComponent showDialog={showDialog} setShowDialog={setShowDialog}>
-      <header className="justify-center px-4 py-4 overflow-auto relative flex  text-slate-700 flex-row items-center border-b border-slate-300/75 dark:border-slate-800/75">
-        <div className="flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center ">
+      <header
+        className="justify-center px-4 py-4 overflow-x-auto relative flex  text-slate-700 flex-row items-center border-b border-slate-300/75 dark:border-slate-800/75 scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
+        <div className="flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center">
           <div className="sm:overflow-hidden sm:rounded-md">
             <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
               <div className="col-span-6 justify-center flex-center">

diff --git a/zbook_frontend/src/components/elements/details/ListUserElement.tsx b/zbook_frontend/src/components/elements/details/ListUserElement.tsx
@@ -49,7 +49,9 @@ export default function ListUserElement({
             <div className="flex flex-col justify-begin">
               <Link href={`/workspace/${username}`} className="cursor-pointer">
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {username}

diff --git a/zbook_frontend/src/components/navbars/NavLang.tsx b/zbook_frontend/src/components/navbars/NavLang.tsx
@@ -41,7 +41,11 @@ export default function NavLink() {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute mt-2 max-h-60 w-36 overflow-auto rounded-md bg-white dark:bg-slate-800 py-1 text-base border-[0.01rem] dark:border-slate-600 ring-1 ring-black/5 focus:outline-none sm:text-sm right-0">
+          <Listbox.Options
+            className="absolute mt-2 max-h-60 w-36 overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] rounded-md bg-white dark:bg-slate-800 py-1 text-base border-[0.01rem] dark:border-slate-600 ring-1 ring-black/5 focus:outline-none sm:text-sm right-0"
+          >
             {locales.map((lang, langIdx) => (
               <Link
                 href={pathname}

diff --git a/zbook_frontend/src/components/navbars/NavTheme.tsx b/zbook_frontend/src/components/navbars/NavTheme.tsx
@@ -45,7 +45,11 @@ export default function NavLang() {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute mt-2 max-h-60 w-36 overflow-auto rounded-md bg-white dark:bg-slate-800 py-1 text-base border-[0.01rem] dark:border-slate-600 ring-1 ring-black/5 focus:outline-none sm:text-sm right-0">
+          <Listbox.Options
+            className="absolute mt-2 max-h-60 w-36 overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] rounded-md bg-white dark:bg-slate-800 py-1 text-base border-[0.01rem] dark:border-slate-600 ring-1 ring-black/5 focus:outline-none sm:text-sm right-0"
+          >
             {themeClass.map((choosed, idx) => (
               <div key={idx}>
                 <Listbox.Option

diff --git a/zbook_frontend/src/components/notifications/NotificationDialog.tsx b/zbook_frontend/src/components/notifications/NotificationDialog.tsx
@@ -99,17 +99,21 @@ export default function NotificationDialog() {
     return index == 0
       ? systemUnreadedCount
       : index == 1
-      ? followerUnreadedCount
-      : index == 2
-      ? repoUnreadedCount
-      : commentUnreadedCount;
+        ? followerUnreadedCount
+        : index == 2
+          ? repoUnreadedCount
+          : commentUnreadedCount;
   }
   return (
     <DialogComponent
       showDialog={notiDialogOpen}
       setShowDialog={setNotiDialogOpen}
     >
-      <header className="justify-center px-4 py-4 overflow-auto relative flex flex-row items-center">
+      <header
+        className="justify-center px-4 py-4 overflow-x-auto relative flex flex-row items-center scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
         <p className="text-lg md:text-xl py-2 text-slate-800 dark:text-slate-100">
           {t("Notifications")}
         </p>
@@ -145,7 +149,9 @@ export default function NotificationDialog() {
           <Tab.Panels
             className="my-2
           rounded-lg md:rounded-xl bg-gray-200/75 dark:bg-gray-900/75 px-3 py-1
-          overflow-y-auto md:h-96 h-[30rem] scrollbar-thin  scrollbar-thumb-rounded-md scrollbar-track-rounded-md"
+          overflow-y-auto md:h-96 h-[30rem] scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
           >
             <Tab.Panel key={0} className={"h-full"}>
               <ListNotifications notificationType="systemNotification" />

diff --git a/zbook_frontend/src/components/parsers/CodeBlock.tsx b/zbook_frontend/src/components/parsers/CodeBlock.tsx
@@ -49,7 +49,11 @@ export default function CodeBlock({
           />
         </div>
       </div>
-      <div className="highlight px-2 md:px-4 mt-2 md:mt-4 text-xs md:text-sm text-slate-800 dark:text-slate-200 scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md overflow-auto">
+      <div
+        className="highlight px-2 md:px-4 mt-2 md:mt-4 text-xs md:text-sm text-slate-800 dark:text-slate-200 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
         {lang === "mermaid" ? (
           <CodeMermaid graphDefinition={codeString} />
         ) : (

diff --git a/zbook_frontend/src/components/parsers/HtmlParser.tsx b/zbook_frontend/src/components/parsers/HtmlParser.tsx
@@ -192,7 +192,12 @@ const parseHTMLString = (
         }
       } else if (tagName === "P") {
         return (
-          <p key={randomKey} className="overflow-scroll">
+          <p
+            key={randomKey}
+            className="overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+          >
             {Array.from(node.childNodes).map(processNode)}
           </p>
         );

diff --git a/zbook_frontend/src/components/parsers/ParserElement.tsx b/zbook_frontend/src/components/parsers/ParserElement.tsx
@@ -21,8 +21,12 @@ const options: HTMLReactParserOptions = {
               className="absolute inset-0 bg-grid-light dark:bg-grid-dark [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]  dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]"
               style={{ backgroundPosition: "10px 10px" }} // 使用对象格式
             ></div>
-            <div className="relative rounded-xl overflow-auto">
-              <div className="shadow-sm my-8 overflow-scroll">
+            <div
+              className="relative rounded-xl overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+            >
+              <div className="shadow-sm my-8">
                 <table
                   className="border-collapse table-auto w-full text-sm"
                   {...props}

diff --git a/zbook_frontend/src/components/searchs/SearchFooter.tsx b/zbook_frontend/src/components/searchs/SearchFooter.tsx
@@ -14,7 +14,7 @@ export default function SearchFooter() {
             </span>
           </h1>
         </Link>
-        <Link href="/" className="flex-none overflow-hidden ">
+        <Link href="/" className="flex-none overflow-hidden">
           <picture>
             <Image
               src="/logo_128.png"

diff --git a/zbook_frontend/src/components/searchs/SearchMarkdownComponent.tsx b/zbook_frontend/src/components/searchs/SearchMarkdownComponent.tsx
@@ -49,11 +49,15 @@ export default function SearchMarkdownComponent(props: ProfileProps) {
           }
           className="flex items-center justify-between w-full px-2"
         >
-          <div className="flex items-center justify-center overflow-scroll">
+          <div
+            className="flex items-center justify-center overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+          >
             <div className="p-2">
               <CgHashtag className="w-5 h-5" />
             </div>
-            <div className="flex-grow overflow-scroll">
+            <div className="flex-grow">
               <span>{props.MarkdownBasicInfo.relative_path}</span>
               <br />
               <span>

diff --git a/zbook_frontend/src/components/sidebars/RepoSideBar.tsx b/zbook_frontend/src/components/sidebars/RepoSideBar.tsx
@@ -40,7 +40,11 @@ export default function RepoSideBar({
         searchType={SearchType.REPO_DOCUMENT}
       />
 
-      <div className="absolute inset-0 z-10 overflow-auto pb-10 pt-32 lg:pt-24 px-4">
+      <div
+        className="absolute inset-0 z-10 overflow-y-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] pb-10 pt-32 lg:pt-24 px-4"
+      >
         <div className="pt-4"></div>
         <ul id="navigation-items">
           <RepoSideBarSetting

diff --git a/zbook_frontend/src/components/sidebars/SideBarTransition.tsx b/zbook_frontend/src/components/sidebars/SideBarTransition.tsx
@@ -30,7 +30,9 @@ export default function SideBarTransition(props: SideBarTransitionProps) {
         leaveFrom="translate-x-0 opacity-100"
         leaveTo="-translate-x-full opacity-0"
         className={`fixed z-40 inset-0 w-[20rem] top-0 pt-8 lg:pt-12
-        overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md  bg-white dark:bg-gray-900 border-r-[0.01rem] border-slate-300 dark:border-slate-700`}
+        overflow-y-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] bg-white dark:bg-gray-900 border-r-[0.01rem] border-slate-300 dark:border-slate-700`}
       >
         {props.children}
       </Transition.Child>

diff --git a/zbook_frontend/src/components/sidebars/UserSideBarProfile.tsx b/zbook_frontend/src/components/sidebars/UserSideBarProfile.tsx
@@ -32,7 +32,11 @@ export default function UserSideBarProfile({
       </div>
 
       <blockquote className="text-slate-700 dark:text-slate-300 text-sm">
-        <p className="overflow-x-auto">
+        <p
+          className="overflow-x-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+        >
           <span className="font-bold pr-2 text-sm">{bio}</span>
           {motto}
         </p>

diff --git a/zbook_frontend/src/components/wrappers/FormGroupWrapper.tsx b/zbook_frontend/src/components/wrappers/FormGroupWrapper.tsx
@@ -20,7 +20,11 @@ export default function FormGroupWrapper({
         {showName}
       </label>
       {children}
-      <div className="flex items-center justify-start h-5 pt-1 text-xs text-pink-600 whitespace-nowrap overflow-x-scroll">
+      <div
+        className="flex items-center justify-start h-5 pt-1 text-xs text-pink-600 whitespace-nowrap overflow-x-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
         {formik.errors[nameKey] && (formik.errors[nameKey] as string)}
       </div>
     </div>

diff --git a/zbook_frontend/src/components/wrappers/FormListBox.tsx b/zbook_frontend/src/components/wrappers/FormListBox.tsx
@@ -46,8 +46,10 @@ export default function FormListBox({
           leaveTo="opacity-0"
         >
           <Listbox.Options
-            className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm
-                    overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md z-50 dark:border dark:border-slate-700"
+            className="absolute mt-1 max-h-60 w-full rounded-md bg-white dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm
+                    overflow-y-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] z-50 dark:border dark:border-slate-700"
           >
             {options.map((option, optionIdx) => (
               <Listbox.Option

diff --git a/zbook_frontend/src/providers/dialogs/CreateInvitation.tsx b/zbook_frontend/src/providers/dialogs/CreateInvitation.tsx
@@ -71,7 +71,7 @@ export default function CreateInvitation() {
       setShowDialog={setCreateInvitationOpen}
     >
       <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
-        <div className="sm:overflow-hidden sm:rounded-md w-full">
+        <div className="sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">
               <label

diff --git a/zbook_frontend/src/providers/dialogs/CreateRepoDialog.tsx b/zbook_frontend/src/providers/dialogs/CreateRepoDialog.tsx
@@ -131,7 +131,7 @@ export default function CreateRepoDialog() {
       setShowDialog={setCreateRepoOpen}
     >
       <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
-        <div className="sm:overflow-hidden sm:rounded-md w-full">
+        <div className="sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">
               <label

diff --git a/zbook_frontend/src/providers/dialogs/CreateSystemNotification.tsx b/zbook_frontend/src/providers/dialogs/CreateSystemNotification.tsx
@@ -84,7 +84,7 @@ export default function CreateSystemNotification() {
       setShowDialog={setCreateSystemNotificationOpen}
     >
       <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
-        <div className="sm:overflow-hidden sm:rounded-md w-full">
+        <div className="sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">
               <label

diff --git a/zbook_frontend/src/providers/dialogs/SearchDialog.tsx b/zbook_frontend/src/providers/dialogs/SearchDialog.tsx
@@ -28,7 +28,10 @@ export default function SearchDialog() {
         className="px-2 md:px-4 mx-4
              rounded-lg md:rounded-lg 
              ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 overflow-x-clip
-             overflow-y-auto md:h-96 h-[30rem] scrollbar-thin  scrollbar-thumb-rounded-md scrollbar-track-rounded-md  pb-2 md:pb-4"
+             overflow-y-auto  scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
+              md:h-96 h-[30rem] pb-2 md:pb-4"
       >
         <ListQueryElements
           key={query + searchType}

diff --git a/zbook_frontend/src/providers/dialogs/UpdateRepoDialog.tsx b/zbook_frontend/src/providers/dialogs/UpdateRepoDialog.tsx
@@ -105,7 +105,7 @@ export default function UpdateRepoDialog() {
       setShowDialog={setUpdateRepoOpen}
     >
       <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
-        <div className="sm:overflow-hidden sm:rounded-md w-full">
+        <div className="sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">
               <label

diff --git a/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx b/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx
@@ -102,7 +102,7 @@ export default function UpdateUserDialog() {
       setShowDialog={setUpdateUserOpen}
     >
       <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
-        <div className="sm:overflow-hidden sm:rounded-md w-full">
+        <div className="sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">
               <label
@@ -160,7 +160,7 @@ export default function UpdateUserDialog() {
                 <label className="block w-full">
                   <div className="w-full cursor-pointer flex">
                     <div
-                      className=" flex items-center overflow-scroll justify-center text-sm font-semibold py-2 px-4 bg-sky-400 dark:bg-slate-700 text-white dark:text-slate-200 
+                      className="flex items-center justify-center text-sm font-semibold py-2 px-4 bg-sky-400 dark:bg-slate-700 text-white dark:text-slate-200 
                   rounded-full border-0 mr-4 hover:bg-sky-500 dark:hover:bg-sky-600 
                   focus:none focus:outline-sky-200 focus:rounded-full dark:focus:outline-1 dark:focus:outline-slate-700	focus:outline-dashed 
                   "