Skip to content

Fix find widget alignment #5741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 24, 2025
Merged

Fix find widget alignment #5741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
61064d1
find widget fixes
RomneyDa May 20, 2025
d683acc
fix no header case
RomneyDa May 20, 2025
9ffc3a6
Merge branch 'main' of https://github.com/continuedev/continue into d…
RomneyDa May 20, 2025
939b1e8
Merge branch 'main' of https://github.com/continuedev/continue into d…
RomneyDa May 23, 2025
7a638ee
WIP: split find widget
RomneyDa May 23, 2025
c36391f
find widget cleanup
RomneyDa May 23, 2025
b55079e
works with tab resize now
RomneyDa May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions gui/src/components/TabBar/TabBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { XMarkIcon } from "@heroicons/react/24/outline";
import { useCallback, useEffect } from "react";
import React, { useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import { defaultBorderRadius } from "..";
Expand Down Expand Up @@ -35,6 +35,8 @@ const TabBarContainer = styled.div`
border-bottom: none;
position: relative;
margin-top: 2px;
max-height: 100px;
overflow: auto;

/* Hide scrollbar but keep functionality */
scrollbar-width: none;
Expand Down Expand Up @@ -125,7 +127,7 @@ const TabBarSpace = styled.div`
background-color: ${tabBackgroundVar};
`;

export function TabBar() {
export const TabBar = React.forwardRef<HTMLDivElement>((_, ref) => {
const dispatch = useDispatch<AppDispatch>();
const currentSessionId = useSelector((state: RootState) => state.session.id);
const currentSessionTitle = useSelector(
Expand All @@ -141,7 +143,6 @@ export function TabBar() {
return Date.now().toString(36) + Math.random().toString(36).substring(2);
}, []);

// Handle session changes
useEffect(() => {
if (!currentSessionId) return;

Expand Down Expand Up @@ -224,10 +225,13 @@ export function TabBar() {
}
};

return tabs.length === 1 ? (
<></>
) : (
<TabBarContainer>
return (
<TabBarContainer
ref={ref}
style={{
display: tabs.length === 1 ? "none" : "flex",
}}
>
{tabs.map((tab) => (
<Tab
key={tab.id}
Expand All @@ -253,4 +257,4 @@ export function TabBar() {
</TabBarSpace>
</TabBarContainer>
);
}
});
Loading
Loading