aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-23 17:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrollbars not showing for mac and some padding issues (#1917)

Browse Source
This commit is contained in:
Zane
2025-03-28 16:12:28 -07:00
committed by GitHub
parent 5c605c92e0
commit 08d8bb46bc
4 changed files with 111 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/desktop/src/components/ChatView.tsx
View File

@@ -386,7 +386,8 @@ export default function ChatView({
activities={botConfig?.activities || null}
/>
) : (
<ScrollArea ref={scrollRef} className="flex-1 px-4" autoScroll>
<ScrollArea ref={scrollRef} className="flex-1" autoScroll>
<div className="px-4">
{filteredMessages.map((message, index) => (
<div key={message.id || index} className="mt-[16px]">
{isUserMessage(message) ? (
@@ -406,6 +407,7 @@ export default function ChatView({
)}
</div>
))}
</div>
{error && (
<div className="flex flex-col items-center justify-center p-4">
<div className="text-red-700 dark:text-red-300 bg-red-400/50 p-3 rounded-lg mb-2">

2
ui/desktop/src/components/sessions/SessionHistoryView.tsx
View File

@@ -98,7 +98,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
};
return (
<div className="h-screen w-full">
<div className="h-screen w-full flex flex-col">
<div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
{/* Top Row - back, info, reopen thread (fixed) */}

2
ui/desktop/src/components/sessions/SessionViewComponents.tsx
View File

@@ -77,7 +77,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
onRetry,
}) => {
return (
<ScrollArea className="h-[calc(100vh-120px)] w-full">
<ScrollArea className="h-full w-full">
<div className="p-4">
<div className="flex flex-col space-y-4">
<div className="space-y-4 mb-6">

87
ui/desktop/src/styles/main.css
View File

@@ -148,6 +148,93 @@
--text-prominent-inverse: var(--grey-20);
}
/* end arcade colors */
/* Force scrollbars to be visible */
[data-radix-scroll-area-viewport] {
scrollbar-width: auto !important;
-ms-overflow-style: auto !important;
}
/* Override Radix UI ScrollArea styles */
[data-radix-scroll-area-viewport] > div {
display: block !important;
}
/* Native scrollbar styling */
* {
scrollbar-width: auto;
scrollbar-color: var(--grey-80) transparent;
}
.dark * {
scrollbar-color: var(--dark-grey-45) transparent;
}
/* Webkit scrollbar styles */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 12px; /* Increased from 8px */
height: 12px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background-color: var(--grey-80);
border: 3px solid transparent; /* Creates padding effect */
border-radius: 8px;
background-clip: padding-box;
min-height: 40px; /* Minimum height of thumb */
}
.dark ::-webkit-scrollbar-thumb {
background-color: var(--dark-grey-45);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--grey-60);
border: 2px solid transparent; /* Slightly less padding on hover */
}
.dark ::-webkit-scrollbar-thumb:hover {
background-color: var(--dark-grey-60);
}
/* Ensure the thumb is more prominent when active */
::-webkit-scrollbar-thumb:active {
background-color: var(--grey-50);
border: 2px solid transparent;
}
.dark ::-webkit-scrollbar-thumb:active {
background-color: var(--dark-grey-60);
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--grey-80);
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
background: var(--dark-grey-45);
}
::-webkit-scrollbar-thumb:hover {
background: var(--grey-60);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: var(--dark-grey-60);
}
}
}