feat(ui): adaptive styling and mobile UX improvements

apps/native/eslint.config.mjs

@@ -1,4 +1,9 @@
-import { nextJsConfig } from "@workspace/eslint-config/next-js"
+import { nextJsConfig } from "@workspace/eslint-config/next-js";
 
 /** @type {import("eslint").Linter.Config} */
-export default nextJsConfig
+export default [
+  ...nextJsConfig,
+  {
+    ignores: ["src-tauri/target/"],
+  },
+];

apps/native/src/app/[locale]/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { notFound } from "next/navigation";
 import { Geist, Geist_Mono } from "next/font/google";
 import { AppLayout } from "./components/AppLayout";
@@ -22,6 +22,10 @@ export const metadata: Metadata = {
   description: "TNTStack",
 };
 
+export const viewport: Viewport = {
+  viewportFit: "cover",
+};
+
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }

apps/web/app/[locale]/(landing)/components/footer.tsx

@@ -116,7 +116,7 @@ export function Footer() {
               <h2 className="text-xl font-bold">TNTStack</h2>
             </div>
           </Link>
-          <p className="mt-4 text-muted-foreground text-sm">
+          <p className="mt-4 text-muted-foreground [font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)]">
             Build Cross-Platform Apps Faster Than Ever
           </p>
           <ModeSwitch />
@@ -126,8 +126,10 @@ export function Footer() {
           {footerLinks.map((section, index) => (
             <AnimatedContainer delay={0.1 + index * 0.1} key={section.label}>
               <div className="mb-10 md:mb-0">
-                <h3 className="text-xs">{section.label}</h3>
-                <ul className="mt-4 space-y-2 text-muted-foreground text-sm">
+                <h3 className="[font-size:var(--comp-text-xs)] [line-height:var(--comp-lh-xs)]">
+                  {section.label}
+                </h3>
+                <ul className="mt-4 space-y-2 text-muted-foreground [font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)]">
                   {section.links.map((link) => (
                     <li key={link.title}>
                       <Link

apps/web/app/[locale]/(landing)/components/header.tsx

@@ -59,7 +59,7 @@ export const HeroHeader = () => {
             </div>
 
             <div className="absolute inset-0 m-auto hidden size-fit lg:block">
-              <ul className="flex gap-8 text-sm">
+              <ul className="flex gap-8 [font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)]">
                 {menuItems.map((item, index) => (
                   <li key={index}>
                     <Link
@@ -75,7 +75,7 @@ export const HeroHeader = () => {
 
             <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
               <div className="lg:hidden">
-                <ul className="space-y-6 text-base">
+                <ul className="space-y-6 [font-size:var(--comp-text-base)] [line-height:var(--comp-lh-base)]">
                   {menuItems.map((item, index) => (
                     <li key={index}>
                       <Link

apps/web/app/[locale]/(landing)/components/hero-section.tsx

@@ -129,7 +129,7 @@ export default function HeroSection() {
                   rel="noopener noreferrer"
                   className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
                 >
-                  <span className="text-foreground text-sm">
+                  <span className="text-foreground [font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)]">
                     TNTStack v{latestTag} Released
                   </span>
                   <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span>
@@ -161,7 +161,7 @@ export default function HeroSection() {
                 speedSegment={0.3}
                 delay={0.5}
                 as="p"
-                className="mx-auto mt-8 max-w-3xl text-balance text-lg"
+                className="mx-auto mt-8 max-w-3xl text-balance [font-size:var(--comp-text-lg)] [line-height:var(--comp-lh-lg)]"
               >
                 The solid stack for building cross-platform apps. Write your
                 code once and build for Web, Desktop, and Mobile. Powered by a
@@ -182,7 +182,11 @@ export default function HeroSection() {
                 }}
                 className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
               >
-                <Button asChild size="lg" className="cursor-pointer text-base">
+                <Button
+                  asChild
+                  size="lg"
+                  className="cursor-pointer [font-size:var(--comp-text-base)] [line-height:var(--comp-lh-base)]"
+                >
                   <Link href="/home">
                     <Play />
                     <span className="text-nowrap">View Web Demo</span>
@@ -193,7 +197,7 @@ export default function HeroSection() {
                   asChild
                   size="lg"
                   variant="outline"
-                  className="cursor-pointer text-base"
+                  className="cursor-pointer [font-size:var(--comp-text-base)] [line-height:var(--comp-lh-base)]"
                 >
                   <Link href="/docs/quick-start">
                     <Rocket />

apps/web/app/[locale]/(landing)/components/platform-cards.tsx

@@ -28,8 +28,12 @@ function DownloadButton({
       className="w-full cursor-pointer justify-between"
     >
       <Link href={href}>
-        <span className="text-sm">{label}</span>
-        <span className="text-muted-foreground text-xs font-mono">{ext}</span>
+        <span className="[font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)]">
+          {label}
+        </span>
+        <span className="text-muted-foreground [font-size:var(--comp-text-xs)] [line-height:var(--comp-lh-xs)] font-mono">
+          {ext}
+        </span>
       </Link>
     </Button>
   );
@@ -66,7 +70,9 @@ function PlatformCard({
             />
           ))
         ) : (
-          <p className="text-sm text-muted-foreground py-2">Coming soon</p>
+          <p className="[font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)] text-muted-foreground py-2">
+            Coming soon
+          </p>
         )}
       </CardContent>
     </Card>
@@ -106,7 +112,7 @@ const CardDecorator = ({ children }: { children: ReactNode }) => (
       className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-size-[24px_24px] dark:opacity-50"
     />
 
-    <div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
+    <div className="bg-background absolute inset-0 m-auto flex size-(--comp-h-12) items-center justify-center border-l border-t">
       {children}
     </div>
   </div>

apps/web/app/[locale]/(landing)/download/download-content.tsx

@@ -106,15 +106,15 @@ export default function DownloadContent({ release }: DownloadContentProps) {
             speedSegment={0.3}
             delay={0.5}
             as="p"
-            className="mx-auto mt-8 max-w-3xl text-balance text-lg"
+            className="mx-auto mt-8 max-w-3xl text-balance [font-size:var(--comp-text-lg)] [line-height:var(--comp-lh-lg)]"
           >
             Get the latest version for your platform. One codebase for Web,
             Desktop, and Mobile.
           </TextEffect>
 
           {release?.version && (
             <AnimatedGroup variants={transitionVariants}>
-              <p className="mt-4 text-sm text-muted-foreground">
+              <p className="mt-4 [font-size:var(--comp-text-sm)] [line-height:var(--comp-lh-sm)] text-muted-foreground">
                 Latest release: v{release.version}
               </p>
             </AnimatedGroup>
@@ -134,7 +134,11 @@ export default function DownloadContent({ release }: DownloadContentProps) {
             }}
             className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
           >
-            <Button asChild size="lg" className="cursor-pointer text-base">
+            <Button
+              asChild
+              size="lg"
+              className="cursor-pointer [font-size:var(--comp-text-base)] [line-height:var(--comp-lh-base)]"
+            >
               <Link href={primaryUrl}>
                 {icon}
                 <span className="text-nowrap">{label}</span>
@@ -144,7 +148,7 @@ export default function DownloadContent({ release }: DownloadContentProps) {
               key={2}
               size="lg"
               variant="outline"
-              className="cursor-pointer text-base"
+              className="cursor-pointer [font-size:var(--comp-text-base)] [line-height:var(--comp-lh-base)]"
               onClick={scrollToPlatforms}
             >
               <ArrowDown />

apps/web/app/[locale]/layout.tsx

@@ -62,6 +62,7 @@ export const metadata: Metadata = {
 
 export const viewport: Viewport = {
   themeColor: "#000000",
+  viewportFit: "cover",
 };
 
 export function generateStaticParams() {