Merge pull request #2176 from gentslava/fix/git-providers-layout

fix(ui): git providers overflow
This commit is contained in:
Mauricio Siu
2025-07-13 01:23:48 -06:00
committed by GitHub
@@ -53,7 +53,7 @@ export const ShowGitProviders = () => {
return ( return (
<div className="w-full"> <div className="w-full">
<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto"> <Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
<div className="rounded-xl bg-background shadow-md "> <div className="rounded-xl bg-background shadow-md ">
<CardHeader className=""> <CardHeader className="">
<CardTitle className="text-xl flex flex-row gap-2"> <CardTitle className="text-xl flex flex-row gap-2">
@@ -73,14 +73,14 @@ export const ShowGitProviders = () => {
) : ( ) : (
<> <>
{data?.length === 0 ? ( {data?.length === 0 ? (
<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center"> <div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
<GitBranch className="size-8 self-center text-muted-foreground" /> <GitBranch className="size-8 self-center text-muted-foreground" />
<span className="text-base text-muted-foreground text-center"> <span className="text-base text-muted-foreground text-center">
Create your first Git Provider Create your first Git Provider
</span> </span>
<div> <div>
<div className="flex items-center bg-sidebar p-1 w-full rounded-lg"> <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
<div className="flex items-center gap-4 p-3.5 rounded-lg bg-background border w-full"> <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
<AddGithubProvider /> <AddGithubProvider />
<AddGitlabProvider /> <AddGitlabProvider />
<AddBitbucketProvider /> <AddBitbucketProvider />
@@ -90,13 +90,13 @@ export const ShowGitProviders = () => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4 min-h-[25vh]"> <div className="flex flex-col gap-4 min-h-[25vh]">
<div className="flex flex-col gap-2 rounded-lg "> <div className="flex flex-col gap-2 rounded-lg ">
<span className="text-base font-medium"> <span className="text-base font-medium">
Available Providers Available Providers
</span> </span>
<div className="flex items-center bg-sidebar p-1 w-full rounded-lg"> <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
<div className="flex items-center gap-4 p-3.5 rounded-lg bg-background border w-full"> <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
<AddGithubProvider /> <AddGithubProvider />
<AddGitlabProvider /> <AddGitlabProvider />
<AddBitbucketProvider /> <AddBitbucketProvider />
@@ -158,7 +158,7 @@ export const ShowGitProviders = () => {
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
{!haveGithubRequirements && isGithub && ( {!haveGithubRequirements && isGithub && (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Link <Link
href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`} href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
className={buttonVariants({ className={buttonVariants({
@@ -171,7 +171,7 @@ export const ShowGitProviders = () => {
</div> </div>
)} )}
{haveGithubRequirements && isGithub && ( {haveGithubRequirements && isGithub && (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Link <Link
href={`${gitProvider?.github?.githubAppName}`} href={`${gitProvider?.github?.githubAppName}`}
target="_blank" target="_blank"
@@ -185,7 +185,7 @@ export const ShowGitProviders = () => {
</div> </div>
)} )}
{!haveGitlabRequirements && isGitlab && ( {!haveGitlabRequirements && isGitlab && (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Link <Link
href={getGitlabUrl( href={getGitlabUrl(
gitProvider.gitlab?.applicationId || "", gitProvider.gitlab?.applicationId || "",