Refactor root admin dashboard UI

components/ui/ui-kit-showcase.tsx

@@ -253,7 +253,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
 
         <TabsContent value="cards">
           <UiKitSection title={copy.cards} description={copy.cardsDesc}>
-            <div className="grid gap-6 lg:grid-cols-2">
+            <div className="grid gap-6">
               <AppCard level={1}>
                 <CardContent className="space-y-4 p-6">
                   <div>
@@ -307,7 +307,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
 
         <TabsContent value="buttons">
           <UiKitSection title={copy.buttons} description={copy.buttonsDesc}>
-            <div className="grid gap-6 lg:grid-cols-2">
+            <div className="grid gap-6">
               <AppCard level={2}>
                 <CardContent className="flex flex-wrap gap-3 p-5">
                   <Button>{copy.default}</Button>
@@ -335,7 +335,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
 
         <TabsContent value="inputs">
           <UiKitSection title={copy.inputs} description={copy.inputsDesc}>
-            <div className="grid gap-6 lg:grid-cols-2">
+            <div className="grid gap-6">
               <AppCard level={2}>
                 <CardContent className="grid gap-4 p-5">
                   <Label className="grid gap-2">
@@ -431,7 +431,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
 
         <TabsContent value="surfaces">
           <UiKitSection title={copy.surfaces} description={copy.surfacesDesc}>
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            <div className="grid gap-4">
               <AppCard level={1}>
                 <CardContent className="p-5">
                   <p className="font-medium">{copy.surfaceOne}</p>
@@ -489,7 +489,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
 
         <TabsContent value="headers">
           <UiKitSection title={copy.headers} description={copy.headersDesc}>
-            <div className="grid gap-6 lg:grid-cols-2">
+            <div className="grid gap-6">
               <AppCard level={3}>
                 <CardContent className="space-y-3 p-6">
                   <div className="inline-flex w-fit items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">