fix scroll custom ui

janhq · Van-QA · May 29, 2024 · May 6, 2024 · May 7, 2024 · May 8, 2024
commit 1a3ceab4b92ea0cd92238dcfe36356b0422021b1
diff --git a/web/containers/LeftPanelContainer/index.tsx b/web/containers/LeftPanelContainer/index.tsx
@@ -43,7 43,7 @@ const LeftPanelContainer = ({ children }: Props) => {
  if (
  mouseMoveEvent.clientX -
  leftPanelRef?.current.getBoundingClientRect().left <
- 195
  170
  ) {
  setIsResizing(false)
  setLeftPanelWidth(DEFAULT_LEFT_PANEL_WIDTH)

diff --git a/web/containers/ListContainer/index.tsx b/web/containers/ListContainer/index.tsx
@@ -43,7 43,7 @@ const ListContainer = ({ children }: Props) => {
 
  return (
  <ScrollArea
- className="flex h-full w-full flex-col"
  className="flex h-full w-full flex-col overflow-x-hidden"
  ref={listRef}
  onScroll={handleScroll}
  >

diff --git a/web/containers/ServerLogs/index.tsx b/web/containers/ServerLogs/index.tsx
diff --git a/web/screens/LocalServer/LocalServerCenterPanel/index.tsx b/web/screens/LocalServer/LocalServerCenterPanel/index.tsx
@@ -1,6 1,6 @@
 import { useEffect, useState } from 'react'
 
-import { Button } from '@janhq/joi'
 import { Button, ScrollArea } from '@janhq/joi'
 import { CodeIcon, Paintbrush } from 'lucide-react'
 
 import { InfoIcon } from 'lucide-react'
@@ -24,7 24,7 @@ const LocalServerCenterPanel = () => {
  }, [firstTimeVisitAPIServer])
 
  return (
- <div className="flex h-full w-full flex-col overflow-x-hidden bg-[hsla(var(--app-bg))]">
  <div className="flex h-full w-full flex-col overflow-hidden bg-[hsla(var(--app-bg))]">
  <div className="sticky top-0 flex items-center justify-between border-b border-[hsla(var(--app-border))] px-4 py-2">
  <h2 className="font-bold">Server Logs</h2>
  <div className="space-x-2">
@@ -70,9 70,9 @@ const LocalServerCenterPanel = () => {
  </div>
  </div>
  ) : (
- <div className="flex w-full">
  <ScrollArea className="flex h-full w-full">
  <ServerLogs />
- </div>
  </ScrollArea>
  )}
  </div>
  )

diff --git a/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
@@ -76,7 76,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
  },
  code(code, lang) {
  return `
- <div class="relative code-block group/item">
  <div class="relative code-block group/item overflow-auto">
  <button class='text-xs copy-action hidden group-hover/item:block bg-gray-950 hover:bg-gray-950/90 text-gray-200 p-2 rounded-lg absolute top-6 right-2' >
  ${
  clipboard.copied
@@ -268,7 268,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
  ) : (
  <div
  className={twMerge(
- 'message flex flex-grow flex-col gap-y-2 font-normal leading-relaxed',
  'message flex flex-col gap-y-2 font-normal leading-relaxed',
  isUser
  ? 'whitespace-pre-wrap break-words'
  : 'bg-secondary rounded-xl p-4'
@@ -281,7 281,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
  ) : (
  <div
  className={twMerge(
- 'message max-width-[100%] flex flex-grow flex-col gap-y-2 overflow-auto font-normal leading-relaxed',
  'message max-width-[100%] flex flex-col gap-y-2 overflow-auto font-normal leading-relaxed',
  isUser
  ? 'whitespace-pre-wrap break-words'
  : 'bg-secondary rounded-xl'

diff --git a/web/screens/Thread/index.tsx b/web/screens/Thread/index.tsx
@@ -5,7 5,7 @@ import ThreadRightPanel from './ThreadRightPanel'
 
 const ThreadScreen = () => {
  return (
- <div className="relative flex h-full w-full overflow-x-hidden">
  <div className="relative flex h-full w-full flex-1 overflow-x-hidden">
  <ThreadLeftPanel />
  <ThreadCenterPanel />
  <ThreadRightPanel />

diff --git a/web/styles/components/code-block.scss b/web/styles/components/code-block.scss
@@ -70,6 70,7 @@ pre > code {
  display: block;
  text-indent: 0;
  white-space: pre;
  max-width: 40vw;
 }
 
 .hljs-emphasis {

diff --git a/web/styles/components/message.scss b/web/styles/components/message.scss
@@ -16,10 16,14 @@
  }
 }
 
-button[class*='react-scroll-to-bottom--'] {
- display: none;
-}
 // button[class*='react-scroll-to-bottom--'] {
 //  display: none;
 // }
 
 .code-block {
  white-space: normal;
 }
 
 pre {
  max-width: 95vw;
 }