fix(ui): align Repository & Self-Host typography and layout with Dashboard

view/app/self-host/components/github-repositories/list-repositories.tsx

@@ -6,6 +6,9 @@ import GithubRepositories, { GithubRepositoriesSkeletonLoader } from './reposito
 import PaginationWrapper from '@/components/ui/pagination';
 import { useTranslation } from '@/hooks/use-translation';
 
+
+import { TypographyMuted } from '@/components/ui/typography';
+
 function ListRepositories() {
   const { t } = useTranslation();
   const {
@@ -28,8 +31,12 @@ function ListRepositories() {
       return <GithubRepositoriesSkeletonLoader />;
     }
 
-  if (paginatedApplications?.length === 0 && !isLoading) {
-      return <div className="text-center">{t('selfHost.repositories.noRepositories')}</div>;
+    if (paginatedApplications?.length === 0 && !isLoading) {
+      return (
+        <div className="text-center">
+          {t('selfHost.repositories.noRepositories')}
+        </div>
+      );
     }
     return (
       <>
@@ -62,9 +69,14 @@ function ListRepositories() {
         sortConfig={sortConfig}
         onSortChange={onSortChange}
         sortOptions={sortOptions}
+        /* (changed) plain string label, no nested heading */
         label={t('selfHost.repositories.title')}
-        className="mt-5 mb-5"
+        className="mt-5 mb-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2"
       />
+      <TypographyMuted className="mb-5">
+        {t('selfHost.repositories.description')}
+      </TypographyMuted>
+
       {renderGithubRepositories()}
     </div>
   );

view/app/self-host/components/github-repositories/repository-card.tsx

@@ -6,6 +6,9 @@ import { GithubRepository } from '@/redux/types/github';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useTranslation } from '@/hooks/use-translation';
 
+
+import { TypographySmall, TypographyMuted } from '@/components/ui/typography';
+
 const GithubRepositories = ({
   name,
   html_url: url,
@@ -23,13 +26,15 @@ const GithubRepositories = ({
 
   return (
     <Card
-      className="group relative  w-full max-w-md cursor-pointer overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
+      className="group relative w-full max-w-md cursor-pointer overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
       onClick={() => setSelectedRepository(id.toString())}
     >
       <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2 text-lg font-bold">
-          <Github className="text-primary" size={24} />
-          {name || t('selfHost.repositoryCard.unnamed')}
+        <CardTitle className="flex items-center gap-2 text-xs sm:text-sm font-bold">
+          <Github className="text-primary" size={20} />
+          <TypographySmall>
+            {name || t('selfHost.repositoryCard.unnamed')}
+          </TypographySmall>
           {url && (
             <a
               href={url}
@@ -43,8 +48,8 @@ const GithubRepositories = ({
           )}
         </CardTitle>
         {description && (
-          <CardDescription className="line-clamp-2 text-sm text-muted-foreground">
-            {description}
+          <CardDescription className="line-clamp-2">
+            <TypographyMuted>{description}</TypographyMuted>
           </CardDescription>
         )}
       </CardHeader>
@@ -103,45 +108,3 @@ const GithubRepositories = ({
 };
 
 export default GithubRepositories;
-
-export const GithubRepositoriesSkeletonLoader: React.FC = () => {
-  return (
-    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
-      {[...Array(6)].map((_, index) => (
-        <Card
-          key={index}
-          className="group relative w-full max-w-md overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
-        >
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center gap-2 text-lg font-bold">
-              <Skeleton className="h-6 w-6 rounded-full" />
-              <Skeleton className="h-6 w-40" />
-              <Skeleton className="ml-auto h-6 w-6 rounded-full" />
-            </CardTitle>
-            <CardDescription>
-              <Skeleton className="mt-2 h-4 w-full" />
-              <Skeleton className="mt-1 h-4 w-3/4" />
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex flex-wrap items-center gap-2">
-              <Skeleton className="h-5 w-16 rounded-full" />
-              <Skeleton className="h-5 w-20 rounded-full" />
-            </div>
-            <div className="flex items-center gap-4 text-sm">
-              <Skeleton className="h-4 w-12" />
-              <Skeleton className="h-4 w-12" />
-              <Skeleton className="h-4 w-12" />
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              <Skeleton className="h-5 w-16 rounded-full" />
-              <Skeleton className="h-5 w-16 rounded-full" />
-              <Skeleton className="h-5 w-16 rounded-full" />
-              <Skeleton className="h-5 w-16 rounded-full" />
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-};

view/app/self-host/page.tsx

@@ -15,8 +15,9 @@ import { FeatureNames } from '@/types/feature-flags';
 import DisabledFeature from '@/components/features/disabled-feature';
 import { ResourceGuard, AnyPermissionGuard } from '@/components/rbac/PermissionGuard';
 import PageLayout from '@/components/layout/page-layout';
-import { TypographyH2 } from '@/components/ui/typography';
-import { TypographyMuted } from '@/components/ui/typography';
+
+
+import { TypographyH2, TypographyMuted } from '@/components/ui/typography';
 
 function page() {
   const { t } = useTranslation();
@@ -50,10 +51,7 @@ function page() {
 
   const renderContent = () => {
     return (
-      <AnyPermissionGuard 
-        permissions={['deploy:create']}
-        loadingFallback={null}
-      >
+      <AnyPermissionGuard permissions={['deploy:create']} loadingFallback={null}>
         {inGitHubFlow && (
           <GitHubAppSetup GetGithubConnectors={GetGithubConnectors} />
         )}
@@ -72,13 +70,14 @@ function page() {
   };
 
   return (
-    <ResourceGuard 
-      resource="deploy" 
+    <ResourceGuard
+      resource="deploy"
       action="read"
       loadingFallback={<Skeleton />}
       fallback={
         <div className="flex h-full items-center justify-center">
           <div className="text-center">
+            {/* Consistent access denied message */}
             <TypographyH2>{t('selfHost.page.accessDenied.title')}</TypographyH2>
             <TypographyMuted>{t('selfHost.page.accessDenied.description')}</TypographyMuted>
           </div>
@@ -87,7 +86,7 @@ function page() {
     >
       <PageLayout maxWidth="6xl" padding="md" spacing="lg">
         {renderContent()}
-        
+
         {showApplications && (
           <>
             <DahboardUtilityHeader<Application>
@@ -96,13 +95,11 @@ function page() {
               sortConfig={sortConfig}
               onSortChange={onSortChange}
               sortOptions={sortOptions}
+              /* (changed) pass plain string, no nested heading */
               label={t('selfHost.page.title')}
-              className="mt-5 mb-5 justify-between items-center"
+              className="mt-5 mb-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2"
               children={
-                <AnyPermissionGuard 
-                  permissions={['deploy:create']}
-                  loadingFallback={null}
-                >
+                <AnyPermissionGuard permissions={['deploy:create']} loadingFallback={null}>
                   <Button
                     className="mb-4 w-max flex justify-self-end mt-4"
                     onClick={() => {
@@ -114,6 +111,10 @@ function page() {
                 </AnyPermissionGuard>
               }
             />
+            <TypographyMuted className="mb-5">
+              {t('selfHost.page.description')}
+            </TypographyMuted>
+
             {isLoading || isLoadingApplications ? (
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <AppItemSkeleton />
@@ -123,7 +124,10 @@ function page() {
             ) : (
               <>
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                  {applications && applications.map((app: any) => <AppItem key={app.id} {...app} />)}
+                  {applications &&
+                    applications.map((app: any) => (
+                      <AppItem key={app.id} {...app} />
+                    ))}
                 </div>
 
                 {totalPages > 1 && (
@@ -145,3 +149,4 @@ function page() {
 }
 
 export default page;
+