fix: changelogs mobile

ochmanski · ochmanski · commit cb3d9688f0b3 · 2025-09-01T22:45:30.000+02:00
diff --git a/apps/changelog-app/src/components/changelog-header.tsx b/apps/changelog-app/src/components/changelog-header.tsx
@@ -70,7 +70,7 @@ export function ChangelogHeader({
       </Dialog>
 
       <motion.div
-        className="fixed top-0 w-full max-w-3xl left-0 right-0 mx-auto z-50 rounded-3xl border border-border bg-white/70 backdrop-blur-sm shadow-2xl/10"
+        className="fixed top-0 w-full max-w-3xl will-change-auto left-0 right-0 mx-auto z-50 rounded-3xl border border-border bg-white/70 backdrop-blur-sm shadow-2xl/10"
         style={{ top: fixedHeaderTop }}
       >
         <div className="flex items-center justify-between w-full h-full px-3.5 py-2">
@@ -117,7 +117,7 @@ export function ChangelogHeader({
 
           <div className="flex items-center gap-2">
             {filters && (
-              <p className="text-xs">
+              <p className="text-xs max-sm:hidden">
                 {dateRange &&
                   `${dateRange.start.format("MMM D, YYYY")} - ${dateRange.end.format("MMM D, YYYY")}`}
                 {commitRange && `${commitRange.start}..${commitRange.end}`}
@@ -171,7 +171,7 @@ export function ChangelogHeader({
       {showBigHeader && (
         <motion.header
           style={{ opacity: headerOpacity, scale: headerScale }}
-          className="relative text-center flex flex-col gap-0.5 items-center justify-center min-h-64 mx-auto max-w-3xl backdrop-blur-sm border border-blue-300/30 rounded-3xl bg-background/10 p-8 py-12 mb-12 mt-12 shadow-2xl/25"
+          className="relative text-center flex will-change-auto flex-col gap-0.5 items-center justify-center min-h-64 mx-auto max-w-3xl backdrop-blur-sm border border-blue-300/30 rounded-3xl bg-background/10 p-8 py-12 mb-12 mt-12 max-sm:m-1 max-sm:mb-12 shadow-2xl/25"
         >
           <div className="absolute left-4 top-4">
             <Link
@@ -185,7 +185,12 @@ export function ChangelogHeader({
 
           <button
             className="absolute right-0 top-0 p-4"
-            onClick={() => setHelpDialogOpen(true)}
+            onClick={() => {
+              setHelpDialogOpen(true);
+              if (window.scrollY < 250) {
+                window.scrollTo({ top: 250, behavior: "smooth" });
+              }
+            }}
             type="button"
           >
             <HelpCircle className="size-4 text-white/70 hover:text-white/50 active:text-white/50 focus:text-white/50 transition-colors duration-75" />
@@ -216,7 +221,7 @@ export function ChangelogHeader({
           <motion.h1
             layout="position"
             layoutId="changelog-header"
-            className="text-3xl font-bold text-white text-shadow-xs"
+            className="text-3xl max-sm:text-2xl font-bold text-white text-shadow-xs"
           >
             <Link
               to="/$owner"
@@ -234,7 +239,7 @@ export function ChangelogHeader({
                   layoutId={`${repo}-header`}
                   to="/$owner/$repo"
                   params={{ owner, repo }}
-                  className="text-white hover:text-white/70 active:text-white/70 focus:text-white/70 transition-colors duration-75"
+                  className="text-white max-sm:break-all hover:text-white/70 active:text-white/70 focus:text-white/70 transition-colors duration-75"
                 >
                   {repo}
                 </MotionLink>{" "}
@@ -247,7 +252,7 @@ export function ChangelogHeader({
             <motion.h2
               layout="position"
               layoutId={`changelog-${slug}-subheader`}
-              className="text-lg text-white/70"
+              className="text-lg text-white/70 max-sm:text-base max-sm:mt-1"
             >
               {dateRange &&
                 `${dateRange.start.format("MMM D, YYYY")} - ${dateRange.end.format("MMM D, YYYY")}`}
diff --git a/apps/changelog-app/src/components/footer.tsx b/apps/changelog-app/src/components/footer.tsx
@@ -16,7 +16,7 @@ export function Footer() {
     <div className="max-w-3xl mx-auto pb-12">
       <motion.footer
         style={{ opacity: footerOpacity, scale: footerScale }}
-        className="relative border border-border rounded-3xl shadow-2xl/25"
+        className="relative will-change-auto border border-border rounded-3xl shadow-2xl/25"
       >
         <BlueprintBackground4 />
         <DustOverlay className="opacity-10 absolute inset-0 rounded-xl overflow-hidden" />
@@ -26,7 +26,7 @@ export function Footer() {
 
         <div className="flex items-start justify-between p-4">
           <div className="flex flex-col">
-            <p className="text-2xl font-medium text-white">Changelogs.ai</p>
+            <p className="text-2xl font-medium text-white">Changelogs AI</p>
             <p className="text-white/70 text-base">Generate changelogs for your projects.</p>
           </div>
 
@@ -60,7 +60,7 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="flex flex-col items-center justify-center gap-1 mt-24 pb-2">
+        <div className="flex flex-col items-center justify-center text-center gap-1 mt-24 pb-2 px-2">
           <a
             href="https://asyncstatus.com"
             target="_blank"
diff --git a/apps/changelog-app/src/components/help-dialog-content.tsx b/apps/changelog-app/src/components/help-dialog-content.tsx
@@ -1,21 +1,33 @@
 import { SiGithub } from "@asyncstatus/ui/brand-icons";
 import { AsyncStatusLogo } from "@asyncstatus/ui/components/async-status-logo";
-import { DialogContent, DialogHeader, DialogTitle } from "@asyncstatus/ui/components/dialog";
+import { Button } from "@asyncstatus/ui/components/button";
+import {
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@asyncstatus/ui/components/dialog";
 
 export function HelpDialogContent() {
   return (
-    <DialogContent className="sm:max-w-xl w-full rounded-3xl p-12" hideCloseButton>
-      <DialogHeader className="text-center items-center">
-        <DialogTitle className="text-3xl font-bold mb-6">What is Changelogs.ai?</DialogTitle>
+    <DialogContent
+      className="sm:max-w-xl w-full overflow-y-auto rounded-3xl p-12 max-sm:py-4 max-sm:px-4 max-sm:inset-0 max-sm:translate-0 max-sm:max-w-none m-0 max-sm:w-full max-sm:h-[calc(100vh-2rem)]"
+      hideCloseButton
+    >
+      <DialogHeader className="text-center items-center max-sm:m-0! max-sm:p-0!">
+        <DialogTitle className="text-3xl font-bold mb-6 max-sm:my-4">
+          What is Changelogs AI?
+        </DialogTitle>
       </DialogHeader>
 
       <div className="prose prose-neutral">
         <p className="text-pretty text-xl text-black/80">
-          <span className="text-black">Changelogs.ai</span> is a tool that generates changelogs for
+          <span className="text-black">Changelogs AI</span> is a tool that generates changelogs for
           your projects, based on your commit messages, pull requests, issues and more.
         </p>
 
-        <p className="text-pretty text-xl text-black/80 mt-10!">
+        <p className="text-pretty text-xl text-black/80 mt-10! max-sm:mt-18!">
           It's <span className="text-black">open-source</span>,{" "}
           <span className="text-black">mostly free to use</span> and powered by{" "}
           <a
@@ -40,7 +52,7 @@ export function HelpDialogContent() {
           .
         </p>
 
-        <p className="text-pretty text-xl text-black/80 mt-10!">
+        <p className="text-pretty text-xl text-black/80 mt-10! max-sm:mt-18!">
           We're a team of 2 people (
           <a href="mailto:kacper@asyncstatus.com" className="text-blue-500">
             Kacper
@@ -54,9 +66,17 @@ export function HelpDialogContent() {
           that.
         </p>
 
-        <p className="text-pretty text-xl text-black/80 mt-10!">No standup. Just progress.</p>
+        <p className="text-pretty text-xl text-black/80 mt-10! max-sm:mt-18!">
+          No standup. Just progress.
+        </p>
         <Handwriting />
       </div>
+
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Close</Button>
+        </DialogClose>
+      </DialogFooter>
     </DialogContent>
   );
 }
diff --git a/apps/changelog-app/src/routes/$owner/$repo/$filters/index.tsx b/apps/changelog-app/src/routes/$owner/$repo/$filters/index.tsx
@@ -167,7 +167,7 @@ function RouteComponent() {
         )}
 
         {mostRecentChangelog && (
-          <motion.div className="prose prose-neutral dark:prose-invert prose-base mx-auto pb-24">
+          <motion.div className="prose prose-neutral dark:prose-invert prose-base mx-auto pb-24 max-sm:px-4">
             <Markdown>{mostRecentChangelog?.content}</Markdown>
           </motion.div>
         )}
diff --git a/apps/changelog-app/src/routes/$owner/$repo/index.tsx b/apps/changelog-app/src/routes/$owner/$repo/index.tsx
@@ -124,7 +124,7 @@ function RouteComponent() {
           </div>
         )}
 
-        <div className="grid grid-cols-1 gap-4 max-w-3xl mx-auto">
+        <div className="grid grid-cols-1 gap-4 max-w-3xl mx-auto max-sm:px-4">
           {changelogsByRepo?.data?.changelogs.map((changelog, index) => {
             const rangeStart = changelog.rangeStart ? dayjs(changelog.rangeStart) : undefined;
             const rangeEnd = changelog.rangeEnd ? dayjs(changelog.rangeEnd) : undefined;
@@ -158,13 +158,13 @@ function RouteComponent() {
                     {commitStart} - {commitEnd}
                   </motion.p>
                 )}
-                <div className="relative text-muted-foreground my-1 mb-2 line-clamp-7">
+                <div className="relative text-muted-foreground my-1 mb-2 line-clamp-7 max-sm:mt-4">
                   <Markdown size="sm" variant="primary">
                     {tldr}
                   </Markdown>
                   <div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-background to-transparent" />
                 </div>
-                <div className="text-xl text-muted-foreground">
+                <div className="text-xl text-muted-foreground max-sm:mt-4">
                   <Button asChild variant={index === 0 ? "default" : "outline"} className="w-full">
                     <Link
                       to="/$owner/$repo/$filters"
diff --git a/apps/changelog-app/src/routes/$owner/index.tsx b/apps/changelog-app/src/routes/$owner/index.tsx
@@ -52,7 +52,7 @@ function RouteComponent() {
       <ChangelogHeader owner={owner} showBigHeader={Boolean(repos.data?.length > 0)} />
 
       <div className="min-h-[100dvh]">
-        <main className="grid grid-cols-1 gap-4 md:grid-cols-2 max-w-3xl mx-auto">
+        <main className="grid grid-cols-1 gap-4 md:grid-cols-2 max-w-3xl mx-auto max-sm:px-4">
           {repos.data?.map((repo) => (
             <div
               key={repo.id}
@@ -67,8 +67,8 @@ function RouteComponent() {
                 {repo.repoName}
               </motion.p>
 
-              <div className="flex-1 flex flex-col gap-1 text-muted-foreground">
-                <p className="text-sm truncate" title={repo.description}>
+              <div className="flex-1 flex flex-col gap-1 text-muted-foreground max-sm:gap-4">
+                <p className="text-sm line-clamp-2" title={repo.description}>
                   {repo.description}
                 </p>
 
@@ -112,7 +112,7 @@ function RouteComponent() {
                 </div>
               </div>
 
-              <Button asChild variant="outline" className="w-full">
+              <Button asChild variant="outline" className="w-full max-sm:mt-4">
                 <Link to="/$owner/$repo" params={{ owner, repo: repo.repoName }}>
                   See changelogs
                   <ArrowRightIcon className="size-4" />
