TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tab scrolling

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-07 00:16:02 -07:00
parent 91feeffc5a
commit beab0f7845
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/globals.css
View File

@ -151,4 +151,8 @@
pointer-events: none;
user-select: none;
z-index: 1000;
}
.tab-scroll::-webkit-scrollbar {
display: none;
}

6
frontend/components/editor/index.tsx
View File

@ -598,7 +598,7 @@ export default function CodeEditor({
minSize={30}
defaultSize={60}
>
<div className="h-10 w-full flex gap-2">
<div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
{tabs.map((tab) => (
<Tab
key={tab.id}
@ -712,7 +712,7 @@ export default function CodeEditor({
>
{isOwner ? (
<>
<div className="h-10 w-full flex gap-2 shrink-0">
<div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
{terminals.map((term) => (
<Tab
key={term.id}
@ -737,7 +737,7 @@ export default function CodeEditor({
}}
size="smIcon"
variant={"secondary"}
className={`font-normal select-none text-muted-foreground`}
className={`font-normal shrink-0 select-none text-muted-foreground`}
>
{creatingTerminal ? (
<Loader2 className="animate-spin w-4 h-4" />

16
frontend/components/editor/live/avatars.tsx
View File

@ -1,6 +1,6 @@
"use client"
"use client";
import { useOthers } from "@/liveblocks.config"
import { useOthers } from "@/liveblocks.config";
const classNames = {
red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
@ -14,10 +14,10 @@ const classNames = {
purple:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
}
};
export function Avatars() {
const users = useOthers()
const users = useOthers();
return (
<>
@ -30,10 +30,12 @@ export function Avatars() {
.slice(0, 2)
.map((letter) => letter[0].toUpperCase())}
</div>
)
);
})}
</div>
<div className="h-full w-[1px] bg-border mx-2" />
{users.length > 0 ? (
<div className="h-full w-[1px] bg-border mx-2" />
) : null}
</>
)
);
}