Skip to content

Commit 9baeac1

Browse files
jsourcebotjsourcebot
authored
Jminnetian/fix connector scrolling (#1418)
* fix: make connector dialogs scroll on small screens * docs: add changelog entry for connector scrolling --------- Co-authored-by: Jack Minnetian <270441393+BlueBottleLatte@users.noreply.github.com>
1 parent fd6720f commit 9baeac1

2 files changed

Lines changed: 22 additions & 18 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3131
- Maintained the sidebar scroll position when navigating between chats instead of resetting to the top. [#1411](https://github.com/sourcebot-dev/sourcebot/pull/1411)
3232
- Upgraded `nodemailer` to `^9.0.1`. [#1356](https://github.com/sourcebot-dev/sourcebot/pull/1356)
3333
- Upgraded `@opentelemetry/core` to `^2.8.0`. [#1413](https://github.com/sourcebot-dev/sourcebot/pull/1413)
34+
- [EE] Fixed connector setup dialogs to add scrolling when connector setup content goes out of view.
3435

3536
## [5.0.4] - 2026-06-18
3637

‎packages/web/src/app/(app)/settings/workspaceAskAgent/workspaceAskAgentPage.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ type PendingConnectorServer = {
6868
discoveredOAuthScopes: string[];
6969
};
7070

71+
const scrollableConnectorDialogContentClassName = "flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden";
72+
const scrollableConnectorDialogBodyClassName = "min-h-0 overflow-y-auto py-4 pr-1";
73+
7174
interface OAuthScopesInputProps {
7275
discoveredOAuthScopes: string[];
7376
selectedOAuthScopes: string[];
@@ -146,7 +149,7 @@ function OAuthScopesInput({
146149
placeholder="Search scopes"
147150
className="h-9"
148151
/>
149-
<div className="max-h-56 overflow-y-auto rounded-md border">
152+
<div className="max-h-56 overflow-y-auto overscroll-contain rounded-md border">
150153
{filteredOAuthScopes.length > 0 ? (
151154
filteredOAuthScopes.map((scope) => (
152155
<div
@@ -864,14 +867,14 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
864867

865868
{/* Add connector dialog */}
866869
<Dialog open={isCreateDialogOpen} onOpenChange={handleCreateDialogOpenChange}>
867-
<DialogContent className="sm:max-w-md">
868-
<DialogHeader>
870+
<DialogContent className={cn(scrollableConnectorDialogContentClassName, "sm:max-w-md")}>
871+
<DialogHeader className="shrink-0">
869872
<DialogTitle>Add Connector</DialogTitle>
870873
<DialogDescription>
871874
Add a workspace-approved connector that members can use with Ask Sourcebot.
872875
</DialogDescription>
873876
</DialogHeader>
874-
<div className="space-y-4 py-4">
877+
<div className={cn(scrollableConnectorDialogBodyClassName, "space-y-4")}>
875878
<div className="space-y-2">
876879
<Label htmlFor="mcp-configuration-name">Name</Label>
877880
<Input
@@ -891,7 +894,7 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
891894
/>
892895
</div>
893896
</div>
894-
<DialogFooter className="sm:justify-between">
897+
<DialogFooter className="shrink-0 sm:justify-between">
895898
<Button variant="outline" onClick={handleCloseCreateDialog}>Cancel</Button>
896899
<Button onClick={handleCreate} disabled={isCreating || !newServerName.trim() || !newServerUrl.trim()}>
897900
{isCreating && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
@@ -910,14 +913,14 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
910913

911914
setIsOAuthScopeSelectionDialogOpen(true);
912915
}}>
913-
<DialogContent className="sm:max-w-lg">
914-
<DialogHeader>
916+
<DialogContent className={cn(scrollableConnectorDialogContentClassName, "sm:max-w-lg")}>
917+
<DialogHeader className="shrink-0">
915918
<DialogTitle>OAuth Scopes</DialogTitle>
916919
<DialogDescription>
917920
Choose the OAuth scopes Sourcebot should request for this connector.
918921
</DialogDescription>
919922
</DialogHeader>
920-
<div className="space-y-4 py-4">
923+
<div className={cn(scrollableConnectorDialogBodyClassName, "space-y-4")}>
921924
{pendingOAuthScopeSelectionServer && (
922925
<div className="rounded-md border bg-muted/40 p-3">
923926
<p className="text-sm font-medium truncate">{pendingOAuthScopeSelectionServer.name}</p>
@@ -933,7 +936,7 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
933936
onCustomOAuthScopeInputChange={setCustomOAuthScopeInput}
934937
/>
935938
</div>
936-
<DialogFooter className="sm:justify-between">
939+
<DialogFooter className="shrink-0 sm:justify-between">
937940
<Button variant="outline" onClick={handleCloseOAuthScopeSelectionDialog}>Cancel</Button>
938941
<Button onClick={handleCreateDynamicOAuthServer} disabled={isCreating}>
939942
{isCreating && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
@@ -950,14 +953,14 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
950953
return;
951954
}
952955
}}>
953-
<DialogContent className="sm:max-w-lg">
954-
<DialogHeader>
956+
<DialogContent className={cn(scrollableConnectorDialogContentClassName, "sm:max-w-lg")}>
957+
<DialogHeader className="shrink-0">
955958
<DialogTitle>Edit OAuth Scopes</DialogTitle>
956959
<DialogDescription>
957960
Changing OAuth scopes clears saved member authorizations so users can reconnect with the updated scopes.
958961
</DialogDescription>
959962
</DialogHeader>
960-
<div className="space-y-4 py-4">
963+
<div className={cn(scrollableConnectorDialogBodyClassName, "space-y-4")}>
961964
{serverToEditOAuthScopes && (
962965
<div className="rounded-md border bg-muted/40 p-3">
963966
<p className="text-sm font-medium truncate">{serverToEditOAuthScopes.name}</p>
@@ -982,7 +985,7 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
982985
</div>
983986
)}
984987
</div>
985-
<DialogFooter className="sm:justify-between">
988+
<DialogFooter className="shrink-0 sm:justify-between">
986989
<Button variant="outline" onClick={handleCloseEditOAuthScopesDialog}>Cancel</Button>
987990
<Button onClick={handleUpdateOAuthScopes} disabled={isUpdatingOAuthScopes}>
988991
{isUpdatingOAuthScopes && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
@@ -1001,9 +1004,11 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
10011004

10021005
setIsClientCredentialsDialogOpen(true);
10031006
}}>
1004-
<DialogContent className="sm:max-w-lg">
1005-
<DialogHeader>
1007+
<DialogContent className={cn(scrollableConnectorDialogContentClassName, "sm:max-w-lg")}>
1008+
<DialogHeader className="shrink-0">
10061009
<DialogTitle>OAuth Client Credentials Required</DialogTitle>
1010+
</DialogHeader>
1011+
<div className={cn(scrollableConnectorDialogBodyClassName, "space-y-4")}>
10071012
<DialogDescription asChild>
10081013
<div className="text-sm text-muted-foreground">
10091014
<Markdown
@@ -1041,8 +1046,6 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
10411046
</Markdown>
10421047
</div>
10431048
</DialogDescription>
1044-
</DialogHeader>
1045-
<div className="space-y-4 py-4">
10461049
{pendingClientCredentialsServer && (
10471050
<div className="rounded-md border bg-muted/40 p-3">
10481051
<p className="text-sm font-medium truncate">{pendingClientCredentialsServer.name}</p>
@@ -1079,7 +1082,7 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
10791082
onCustomOAuthScopeInputChange={setCustomOAuthScopeInput}
10801083
/>
10811084
</div>
1082-
<DialogFooter className="sm:justify-between">
1085+
<DialogFooter className="shrink-0 sm:justify-between">
10831086
<Button variant="outline" onClick={handleCloseClientCredentialsDialog}>Cancel</Button>
10841087
<Button
10851088
onClick={handleCreateStaticOAuthServer}

0 commit comments

Comments
 (0)