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';
 
+/* Typography to match dashboard */
+import { TypographyH1 } from '@/components/ui/typography';
+
 function ListRepositories() {
   const { t } = useTranslation();
   const {
@@ -28,7 +31,7 @@ function ListRepositories() {
       return <GithubRepositoriesSkeletonLoader />;
     }
 
-  if (paginatedApplications?.length === 0 && !isLoading) {
+    if (paginatedApplications?.length === 0 && !isLoading) {
       return <div className="text-center">{t('selfHost.repositories.noRepositories')}</div>;
     }
     return (
@@ -62,7 +65,8 @@ function ListRepositories() {
         sortConfig={sortConfig}
         onSortChange={onSortChange}
         sortOptions={sortOptions}
-        label={t('selfHost.repositories.title')}
+        /* Use TypographyH1 in Title */
+        label={<TypographyH1>{t('selfHost.repositories.title')}</TypographyH1>}
         className="mt-5 mb-5"
       />
       {renderGithubRepositories()}

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';
 
+/* Dashboard typography */
+import { TypographySmall, TypographyMuted } from '@/components/ui/typography';
+
 const GithubRepositories = ({
   name,
   html_url: url,
@@ -23,13 +26,16 @@ 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')}
+        {/* Use TypographySmall in title */}
+        <CardTitle className="flex items-center gap-2 text-sm sm:text-base font-bold">
+          <Github className="text-primary" size={20} />
+          <TypographySmall>
+            {name || t('selfHost.repositoryCard.unnamed')}
+          </TypographySmall>
           {url && (
             <a
               href={url}
@@ -43,8 +49,9 @@ const GithubRepositories = ({
           )}
         </CardTitle>
         {description && (
-          <CardDescription className="line-clamp-2 text-sm text-muted-foreground">
-            {description}
+          <CardDescription className="line-clamp-2">
+            {/* Use TypographyMuted */}
+            <TypographyMuted>{description}</TypographyMuted>
           </CardDescription>
         )}
       </CardHeader>
@@ -104,6 +111,7 @@ 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">
@@ -113,7 +121,7 @@ export const GithubRepositoriesSkeletonLoader: React.FC = () => {
           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">
+            <CardTitle className="flex items-center gap-2 text-sm sm:text-base 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" />

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';
+
+/* added typography to match dashboard */
+import { TypographyH1, TypographyH2, TypographyMuted } from '@/components/ui/typography';
 
 function page() {
   const { t } = useTranslation();
@@ -79,6 +80,7 @@ function page() {
       fallback={
         <div className="flex h-full items-center justify-center">
           <div className="text-center">
+            {/* Altered to use consistent typography */}
             <TypographyH2>{t('selfHost.page.accessDenied.title')}</TypographyH2>
             <TypographyMuted>{t('selfHost.page.accessDenied.description')}</TypographyMuted>
           </div>
@@ -96,7 +98,8 @@ function page() {
               sortConfig={sortConfig}
               onSortChange={onSortChange}
               sortOptions={sortOptions}
-              label={t('selfHost.page.title')}
+              /* Use typography h1 for page title */
+              label={<TypographyH1>{t('selfHost.page.title')}</TypographyH1>}
               className="mt-5 mb-5 justify-between items-center"
               children={
                 <AnyPermissionGuard 
@@ -145,3 +148,4 @@ function page() {
 }
 
 export default page;
+