fix: improve mobile responsiveness

Author: chroxify

apps/web/app/page.tsx

@@ -1,22 +1,20 @@
-import Image from "next/image";
 import { QRCodeUrl } from "@/components/QRCodeUrl";
 import { QRCodeCard } from "@/components/QRCodeCard";
-import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-[100dvh] p-8 pb-20 gap-16 sm:p-20">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-[100dvh] p-4 sm:p-8 pb-20 gap-16 ">
       <main className="flex flex-col gap-8 row-start-2 items-center">
         {/* Title and description */}
         <div className="flex flex-col gap-2 items-center max-w-xl text-center">
           <h1 className="text-5xl font-semibold">QR Code API</h1>
-          <p className="text-lg text-black/60">
+          <p className="sm:text-lg text-black/60">
             A free, simple and fast QR Code API for developers. Generate
             unlimited QR codes programmatically.
           </p>
         </div>
 
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 max-w-xl w-full">
           <QRCodeCard />
           <QRCodeUrl />
         </div>

apps/web/components/QRCodeCard.tsx

@@ -5,15 +5,15 @@ import { QRCodePreview } from "./QRCodePreview";
 
 export function QRCodeCard() {
   return (
-    <div className="flex flex-col gap-4 items-center max-w-xl w-full bg-muted/50 rounded-xl p-3 border">
+    <div className="flex flex-col gap-4 items-center w-full bg-muted/50 rounded-xl p-3 border">
       {/* Data Input */}
       <DataInput />
 
       {/* QR Code Preview */}
       <QRCodePreview />
 
       {/* QR Code Settings */}
-      <div className="flex flex-row gap-2 w-full h-full">
+      <div className="flex flex-col-reverse sm:flex-row gap-2 w-full h-full">
         {/* Logo */}
         <div className="flex flex-col gap-1 w-full">
           <LogoInput />

apps/web/components/QRCodeUrl.tsx

@@ -19,15 +19,15 @@ export function QRCodeUrl() {
 
   return (
     <div
-      className="flex flex-row gap-2 max-w-xl bg-muted/50 items-center justify-between rounded-xl pl-3.5 p-2 border text-sm group hover:cursor-copy"
+      className="flex flex-row gap-2 min-w-0 w-full bg-muted/50 items-center justify-between rounded-xl pl-3.5 p-2 border text-sm group hover:cursor-copy"
       onClick={handleCopy}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
           handleCopy();
         }
       }}
     >
-      <span className="text-muted-foreground truncate select-none">
+      <span className="text-muted-foreground w-full line-clamp-1 select-none break-words break-all overflow-hidden">
         {decodeURIComponent(qrUrl || "")}
       </span>
 

packages/tinyqrc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinyqrc",
   "description": "A tiny QR code generator, written in TypeScript.",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Christo Todorov <[email protected]>",
   "repository": "https://github.com/chroxify/tinyqrc",
   "keywords": [