From 652afaf8638886b5d7fc51d312bd9bda4180eb5d Mon Sep 17 00:00:00 2001
From: aliang <jueliang@tabbyml.com>
Date: Mon, 30 Dec 2024 15:04:45 +0800
Subject: [PATCH] fix(ui): align job info view in context providers (#3629)

* fix(ui): align job info view in context providers

* update: table layout

* [autofix.ci] apply automated fixes

* update

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../(dashboard)/components/dashboard-main.tsx |   2 +-
 .../profile/components/change-name.tsx        |   2 +-
 .../profile/components/change-password.tsx    |   6 +-
 .../(dashboard)/profile/components/email.tsx  |   2 +-
 .../detail/components/provider-detail.tsx     | 209 +++++++-------
 .../providers/components/job-trigger.tsx      |   2 +-
 .../providers/doc/components/custom-doc.tsx   | 258 +++++++++---------
 .../git/components/repository-table.tsx       | 142 +++++-----
 8 files changed, 317 insertions(+), 306 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx b/ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx
index a2b652cfe434..22a3a3942089 100644
--- a/ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx
+++ b/ee/tabby-ui/app/(dashboard)/components/dashboard-main.tsx
@@ -34,7 +34,7 @@ export default function MainContent({
   }, [pathname])
 
   return (
-    <SidebarInset>
+    <SidebarInset className="overflow-x-hidden">
       {/* Wraps right hand side into ScrollArea, making scroll bar consistent across all browsers */}
       <ScrollArea ref={scroller} style={style}>
         <Header />
diff --git a/ee/tabby-ui/app/(dashboard)/profile/components/change-name.tsx b/ee/tabby-ui/app/(dashboard)/profile/components/change-name.tsx
index 34af29f5aa3f..454f4d24b4aa 100644
--- a/ee/tabby-ui/app/(dashboard)/profile/components/change-name.tsx
+++ b/ee/tabby-ui/app/(dashboard)/profile/components/change-name.tsx
@@ -81,7 +81,7 @@ const ChangeNameForm: React.FC<ChangeNameFormProps> = ({
             <FormItem>
               <FormLabel>Name</FormLabel>
               <FormControl>
-                <Input className="w-[350px]" {...field} />
+                <Input className="w-full md:w-[350px]" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
diff --git a/ee/tabby-ui/app/(dashboard)/profile/components/change-password.tsx b/ee/tabby-ui/app/(dashboard)/profile/components/change-password.tsx
index 5f62ca74d442..f39070aadfa7 100644
--- a/ee/tabby-ui/app/(dashboard)/profile/components/change-password.tsx
+++ b/ee/tabby-ui/app/(dashboard)/profile/components/change-password.tsx
@@ -95,7 +95,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
                 <FormLabel required>Old password</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-[350px]"
+                    className="w-full md:w-[350px]"
                     autoCapitalize="none"
                     autoComplete="off"
                     autoCorrect="off"
@@ -117,7 +117,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
                 <FormLabel required>New password</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-[350px]"
+                    className="w-full md:w-[350px]"
                     autoCapitalize="none"
                     autoComplete="off"
                     autoCorrect="off"
@@ -145,7 +145,7 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({
               <FormLabel required>Confirm new password</FormLabel>
               <FormControl>
                 <Input
-                  className="w-[350px]"
+                  className="w-full md:w-[350px]"
                   autoCapitalize="none"
                   autoComplete="off"
                   autoCorrect="off"
diff --git a/ee/tabby-ui/app/(dashboard)/profile/components/email.tsx b/ee/tabby-ui/app/(dashboard)/profile/components/email.tsx
index e68e552806b6..08bfa1101462 100644
--- a/ee/tabby-ui/app/(dashboard)/profile/components/email.tsx
+++ b/ee/tabby-ui/app/(dashboard)/profile/components/email.tsx
@@ -10,7 +10,7 @@ export const Email = () => {
     <div>
       <Input
         disabled
-        className="w-[350px]"
+        className="w-full md:w-[350px]"
         value={data?.me?.email}
         onChange={noop}
       />
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx
index 9e0b6eb249ed..f4f4d0b464d9 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/[kind]/detail/components/provider-detail.tsx
@@ -284,111 +284,114 @@ const ActiveRepoTable: React.FC<{
   return (
     <>
       <LoadingWrapper loading={fetching}>
-        <Table className="table-fixed">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[25%]">Name</TableHead>
-              <TableHead className="w-[35%]">URL</TableHead>
-              <TableHead className="w-[140px]">Access</TableHead>
-              <TableHead className="w-[180px]">Job</TableHead>
-              <TableHead className="w-[60px] text-right">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="shadow-none"
-                  onClick={e => setOpen(true)}
-                >
-                  <IconPlus />
-                </Button>
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {activeRepos?.length || recentlyActivatedRepositories?.length ? (
-              <>
-                {recentlyActivatedRepositories?.map(x => {
-                  return (
-                    <TableRow key={x.node.id} className="!bg-muted/80">
-                      <TableCell className="break-all lg:break-words">
-                        {x.node.displayName}
-                      </TableCell>
-                      <TableCell className="break-all lg:break-words">
-                        {x.node.gitUrl}
-                      </TableCell>
-                      <TableCell></TableCell>
-                      <TableCell></TableCell>
-                      <TableCell className="flex justify-end">
-                        <div
-                          className={buttonVariants({
-                            variant: 'ghost',
-                            size: 'icon'
-                          })}
-                        >
-                          <IconSpinner />
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })}
-                {activeRepos?.map(x => {
-                  return (
-                    <TableRow key={x.node.id}>
-                      <TableCell className="break-all lg:break-words">
-                        {x.node.displayName}
-                      </TableCell>
-                      <TableCell className="break-all lg:break-words">
-                        {x.node.gitUrl}
-                      </TableCell>
-                      <TableCell className="break-all lg:break-words">
-                        <AccessPolicyView
-                          sourceId={x.node.sourceId}
-                          sourceName={x.node.displayName}
-                          editable
-                          fetchingUserGroups={fetchingUserGroups}
-                          userGroups={userGroupData?.userGroups}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <JobInfoView
-                          jobInfo={x.node.jobInfo}
-                          onTrigger={() =>
-                            handleTriggerJobRun(x.node.jobInfo.command)
-                          }
-                        />
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          size="icon"
-                          variant="hover-destructive"
-                          onClick={e =>
-                            handleDelete(x, activeRepos?.length === 1)
-                          }
-                        >
-                          <IconTrash />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })}
-              </>
-            ) : (
+        <ScrollArea>
+          <Table className="min-w-[400px]">
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={5}
-                  className="h-[100px] text-center hover:bg-background"
-                >
-                  <div className="mt-4 flex flex-col items-center gap-4">
-                    <span>No repositories</span>
-                    <Button onClick={e => setOpen(true)} className="gap-1">
-                      <IconPlus />
-                      Add
-                    </Button>
-                  </div>
-                </TableCell>
+                <TableHead className="w-[25%]">Name</TableHead>
+                <TableHead className="w-[35%]">URL</TableHead>
+                <TableHead className="w-[140px]">Access</TableHead>
+                <TableHead>Job</TableHead>
+                <TableHead className="w-[60px] text-right">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="shadow-none"
+                    onClick={e => setOpen(true)}
+                  >
+                    <IconPlus />
+                  </Button>
+                </TableHead>
               </TableRow>
-            )}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {activeRepos?.length || recentlyActivatedRepositories?.length ? (
+                <>
+                  {recentlyActivatedRepositories?.map(x => {
+                    return (
+                      <TableRow key={x.node.id} className="!bg-muted/80">
+                        <TableCell className="break-all lg:break-words">
+                          {x.node.displayName}
+                        </TableCell>
+                        <TableCell className="break-all lg:break-words">
+                          {x.node.gitUrl}
+                        </TableCell>
+                        <TableCell></TableCell>
+                        <TableCell></TableCell>
+                        <TableCell className="flex justify-end">
+                          <div
+                            className={buttonVariants({
+                              variant: 'ghost',
+                              size: 'icon'
+                            })}
+                          >
+                            <IconSpinner />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                  {activeRepos?.map(x => {
+                    return (
+                      <TableRow key={x.node.id}>
+                        <TableCell className="break-all lg:break-words">
+                          {x.node.displayName}
+                        </TableCell>
+                        <TableCell className="break-all lg:break-words">
+                          {x.node.gitUrl}
+                        </TableCell>
+                        <TableCell className="break-all lg:break-words">
+                          <AccessPolicyView
+                            sourceId={x.node.sourceId}
+                            sourceName={x.node.displayName}
+                            editable
+                            fetchingUserGroups={fetchingUserGroups}
+                            userGroups={userGroupData?.userGroups}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <JobInfoView
+                            jobInfo={x.node.jobInfo}
+                            onTrigger={() =>
+                              handleTriggerJobRun(x.node.jobInfo.command)
+                            }
+                          />
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            size="icon"
+                            variant="hover-destructive"
+                            onClick={e =>
+                              handleDelete(x, activeRepos?.length === 1)
+                            }
+                          >
+                            <IconTrash />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </>
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="h-[100px] text-center hover:bg-background"
+                  >
+                    <div className="mt-4 flex flex-col items-center gap-4">
+                      <span>No repositories</span>
+                      <Button onClick={e => setOpen(true)} className="gap-1">
+                        <IconPlus />
+                        Add
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
         {(page > 1 || pageInfo?.hasNextPage) && (
           <div className="mt-2 flex justify-end">
             <div className="flex w-[100px] items-center justify-center text-sm font-medium">
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/components/job-trigger.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/components/job-trigger.tsx
index 9c7c6ad37738..ad1656273ec0 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/components/job-trigger.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/components/job-trigger.tsx
@@ -110,7 +110,7 @@ export function JobInfoView(props: JobInfoProps) {
 
   return (
     <div className={cn('flex items-center gap-1', className)}>
-      <LastJobRunInfo jobInfo={jobInfo} className="hidden lg:block" />
+      <LastJobRunInfo jobInfo={jobInfo} className="hidden lg:block lg:w-32" />
       <JobTrigger
         onTrigger={onTrigger}
         isPending={isJobPending}
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/doc/components/custom-doc.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/doc/components/custom-doc.tsx
index 147717455b76..9200d3672a27 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/doc/components/custom-doc.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/doc/components/custom-doc.tsx
@@ -25,6 +25,7 @@ import {
   PopoverContent,
   PopoverTrigger
 } from '@/components/ui/popover'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import {
   Table,
   TableBody,
@@ -216,135 +217,138 @@ export default function CustomDocument() {
   return (
     <>
       <LoadingWrapper loading={fetching}>
-        <Table className="min-w-[300px] table-fixed border-b">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="flex items-center gap-1.5">
-                Name
-                <Popover open={filterOpen} onOpenChange={setFilterOpen}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="relative shrink-0"
-                    >
-                      <IconListFilter />
-                      {!!debouncedFilterPattern && (
-                        <div className="absolute right-0 top-1 h-1.5 w-1.5 rounded-full bg-red-400"></div>
-                      )}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent align="end" side="right" className="p-1">
-                    <div className="relative">
-                      <IconSearch
-                        className="absolute left-3 top-2.5 cursor-text text-muted-foreground"
-                        onClick={() => inputRef.current?.focus()}
-                      />
-                      <Input
-                        size={30}
-                        className="w-48 px-8"
-                        value={filterPattern}
-                        onChange={e => setFilterPattern(e.target.value)}
-                        ref={inputRef}
-                        placeholder="Search..."
-                        onKeyDown={onInputKeyDown}
-                      />
-                      {filterPattern ? (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="absolute right-3 top-1.5 h-6 w-6 cursor-pointer"
-                          onClick={clearFilter}
-                        >
-                          <IconClose />
-                        </Button>
-                      ) : null}
-                    </div>
-                  </PopoverContent>
-                </Popover>
-                <div>
-                  <Link
-                    href={`./doc/new`}
-                    className={buttonVariants({
-                      size: 'icon',
-                      variant: 'ghost'
-                    })}
-                  >
-                    <IconPlus />
-                  </Link>
-                </div>
-              </TableHead>
-              <TableHead className="w-[140px]">Access</TableHead>
-              <TableHead className="w-[180px]">Job</TableHead>
-              <TableHead className="w-[60px]"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {!currentList?.length && !fetching ? (
-              <TableRow className="hover:bg-background">
-                <TableCell colSpan={4} className="h-[100px] text-center">
-                  {!list?.length ? (
-                    <div className="my-4 flex flex-col items-center gap-4">
-                      No data
-                      <Link href={`./doc/new`} className={buttonVariants()}>
-                        <IconPlus />
-                        Add
-                      </Link>
-                    </div>
-                  ) : (
-                    'No matches data'
-                  )}
-                </TableCell>
-              </TableRow>
-            ) : (
-              <>
-                {currentList?.map(x => {
-                  return (
-                    <TableRow key={x.node.id}>
-                      <TableCell className="break-all lg:break-words">
-                        <p>{x.node.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {x.node.url}
-                        </p>
-                      </TableCell>
-                      <TableCell>
-                        <AccessPolicyView
-                          sourceId={x.node.sourceId}
-                          sourceName={x.node.name}
-                          fetchingUserGroups={fetchingUserGroups}
-                          userGroups={userGroupData?.userGroups}
-                          editable
+        <ScrollArea>
+          <Table className="min-w-[400px] border-b">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="flex items-center gap-1.5">
+                  Name
+                  <Popover open={filterOpen} onOpenChange={setFilterOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="relative shrink-0"
+                      >
+                        <IconListFilter />
+                        {!!debouncedFilterPattern && (
+                          <div className="absolute right-0 top-1 h-1.5 w-1.5 rounded-full bg-red-400"></div>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent align="end" side="right" className="p-1">
+                      <div className="relative">
+                        <IconSearch
+                          className="absolute left-3 top-2.5 cursor-text text-muted-foreground"
+                          onClick={() => inputRef.current?.focus()}
                         />
-                      </TableCell>
-                      <TableCell>
-                        <JobInfoView
-                          jobInfo={x.node.jobInfo}
-                          onTrigger={async () => {
-                            if (x.node?.jobInfo?.command) {
-                              handleTriggerJobRun(
-                                x.node.id,
-                                x.node?.jobInfo.command
-                              )
-                            }
-                          }}
+                        <Input
+                          size={30}
+                          className="w-48 px-8"
+                          value={filterPattern}
+                          onChange={e => setFilterPattern(e.target.value)}
+                          ref={inputRef}
+                          placeholder="Search..."
+                          onKeyDown={onInputKeyDown}
                         />
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          size="icon"
-                          variant="hover-destructive"
-                          onClick={() => handleDeleteCustomDoc(x.node.id)}
-                        >
-                          <IconTrash />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })}
-              </>
-            )}
-          </TableBody>
-        </Table>
+                        {filterPattern ? (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-3 top-1.5 h-6 w-6 cursor-pointer"
+                            onClick={clearFilter}
+                          >
+                            <IconClose />
+                          </Button>
+                        ) : null}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                  <div>
+                    <Link
+                      href={`./doc/new`}
+                      className={buttonVariants({
+                        size: 'icon',
+                        variant: 'ghost'
+                      })}
+                    >
+                      <IconPlus />
+                    </Link>
+                  </div>
+                </TableHead>
+                <TableHead className="w-[140px]">Access</TableHead>
+                <TableHead>Job</TableHead>
+                <TableHead className="w-[60px]"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {!currentList?.length && !fetching ? (
+                <TableRow className="hover:bg-background">
+                  <TableCell colSpan={4} className="h-[100px] text-center">
+                    {!list?.length ? (
+                      <div className="my-4 flex flex-col items-center gap-4">
+                        No data
+                        <Link href={`./doc/new`} className={buttonVariants()}>
+                          <IconPlus />
+                          Add
+                        </Link>
+                      </div>
+                    ) : (
+                      'No matches data'
+                    )}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <>
+                  {currentList?.map(x => {
+                    return (
+                      <TableRow key={x.node.id}>
+                        <TableCell className="break-all lg:break-words">
+                          <p>{x.node.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {x.node.url}
+                          </p>
+                        </TableCell>
+                        <TableCell>
+                          <AccessPolicyView
+                            sourceId={x.node.sourceId}
+                            sourceName={x.node.name}
+                            fetchingUserGroups={fetchingUserGroups}
+                            userGroups={userGroupData?.userGroups}
+                            editable
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <JobInfoView
+                            jobInfo={x.node.jobInfo}
+                            onTrigger={async () => {
+                              if (x.node?.jobInfo?.command) {
+                                handleTriggerJobRun(
+                                  x.node.id,
+                                  x.node?.jobInfo.command
+                                )
+                              }
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            size="icon"
+                            variant="hover-destructive"
+                            onClick={() => handleDeleteCustomDoc(x.node.id)}
+                          >
+                            <IconTrash />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </>
+              )}
+            </TableBody>
+          </Table>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
         <QuickNavPagination
           className="mt-2 flex justify-end"
           page={page}
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/git/components/repository-table.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/git/components/repository-table.tsx
index 7eb06b446157..5c24d49ae52e 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/git/components/repository-table.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/providers/git/components/repository-table.tsx
@@ -17,6 +17,7 @@ import {
   PaginationNext,
   PaginationPrevious
 } from '@/components/ui/pagination'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import {
   Table,
   TableBody,
@@ -131,78 +132,81 @@ export default function RepositoryTable() {
   return (
     <>
       <LoadingWrapper loading={fetching}>
-        <Table className="table-fixed border-t">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[25%]">Name</TableHead>
-              <TableHead className="w-[45%]">Git URL</TableHead>
-              <TableHead className="w-[140px]">Access</TableHead>
-              <TableHead className="w-[180px]">Job</TableHead>
-              <TableHead className="w-[60px]"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {!currentPageRepos?.length && currentPage === 1 ? (
+        <ScrollArea>
+          <Table className="min-w-[400px] border-t">
+            <TableHeader>
               <TableRow>
-                <TableCell colSpan={5} className="h-[100px] text-center">
-                  No Data
-                </TableCell>
+                <TableHead className="w-[25%]">Name</TableHead>
+                <TableHead className="w-[45%]">Git URL</TableHead>
+                <TableHead className="w-[140px]">Access</TableHead>
+                <TableHead>Job</TableHead>
+                <TableHead className="w-[60px]"></TableHead>
               </TableRow>
-            ) : (
-              <>
-                {currentPageRepos?.map(x => {
-                  return (
-                    <TableRow key={x.node.id}>
-                      <TableCell
-                        className="break-all lg:break-words"
-                        title={x.node.name}
-                      >
-                        {x.node.name}
-                      </TableCell>
-                      <TableCell
-                        className="break-all lg:break-words"
-                        title={x.node.gitUrl}
-                      >
-                        {x.node.gitUrl}
-                      </TableCell>
-                      <TableCell className="break-all lg:break-words">
-                        <AccessPolicyView
-                          sourceId={x.node.sourceId}
-                          sourceName={x.node.name}
-                          fetchingUserGroups={fetchingUserGroups}
-                          userGroups={userGroupData?.userGroups}
-                          editable
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <JobInfoView
-                          jobInfo={x.node.jobInfo}
-                          onTrigger={() =>
-                            handleTriggerJobRun(x.node.jobInfo.command)
-                          }
-                        />
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          size="icon"
-                          variant="hover-destructive"
-                          onClick={() =>
-                            handleDeleteRepository(
-                              x.node.id,
-                              currentPageRepos.length === 1
-                            )
-                          }
+            </TableHeader>
+            <TableBody>
+              {!currentPageRepos?.length && currentPage === 1 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="h-[100px] text-center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <>
+                  {currentPageRepos?.map(x => {
+                    return (
+                      <TableRow key={x.node.id}>
+                        <TableCell
+                          className="break-all lg:break-words"
+                          title={x.node.name}
                         >
-                          <IconTrash />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  )
-                })}
-              </>
-            )}
-          </TableBody>
-        </Table>
+                          {x.node.name}
+                        </TableCell>
+                        <TableCell
+                          className="break-all lg:break-words"
+                          title={x.node.gitUrl}
+                        >
+                          {x.node.gitUrl}
+                        </TableCell>
+                        <TableCell className="break-all lg:break-words">
+                          <AccessPolicyView
+                            sourceId={x.node.sourceId}
+                            sourceName={x.node.name}
+                            fetchingUserGroups={fetchingUserGroups}
+                            userGroups={userGroupData?.userGroups}
+                            editable
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <JobInfoView
+                            jobInfo={x.node.jobInfo}
+                            onTrigger={() =>
+                              handleTriggerJobRun(x.node.jobInfo.command)
+                            }
+                          />
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            size="icon"
+                            variant="hover-destructive"
+                            onClick={() =>
+                              handleDeleteRepository(
+                                x.node.id,
+                                currentPageRepos.length === 1
+                              )
+                            }
+                          >
+                            <IconTrash />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </>
+              )}
+            </TableBody>
+          </Table>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
         {showPagination && (
           <Pagination className="my-4">
             <PaginationContent>