Merge pull request #4805 from janhq/fix/ui-minor-issue

fix: minor ui issue

web/screens/Hub/ModelPage/index.tsx

@@ -51,7 +51,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
     >
       <div className="flex h-full w-full justify-center">
         <div className="flex w-full max-w-[800px] flex-col ">
-          <div className="sticky top-0 flex h-12 items-center bg-[hsla(var(--app-bg))] px-4">
+          <div className="sticky top-0 z-10 flex h-12 items-center bg-[hsla(var(--app-bg))] px-4">
             <div className="flex items-center gap-2">
               <button
                 onClick={onGoBack}

web/screens/Settings/Appearance/index.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { useTheme } from 'next-themes'
 
 import { fs, joinPath } from '@janhq/core'
-import { Button, Select, Switch } from '@janhq/joi'
+import { Button, ScrollArea, Select, Switch } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
@@ -73,6 +73,10 @@ export default function AppearanceOptions() {
   )
 
   return (
+    <ScrollArea
+      type={showScrollBar ? 'always' : 'scroll'}
+      className="h-full w-full"
+    >
       <div className="m-4 block">
         <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
           <div className="flex-shrink-0 space-y-1">
@@ -215,5 +219,6 @@ export default function AppearanceOptions() {
           </div>
         </div>
       </div>
+    </ScrollArea>
   )
 }

web/styles/components/marked.scss

@@ -100,6 +100,9 @@
     list-style-position: inside;
     li {
       line-height: 2;
+      p {
+        display: inline;
+      }
     }
   }
 }