ui: optimize ui for smaller viewports

client/src/app/home/Audit.tsx

@@ -55,7 +55,7 @@ export default function Audit() {
   };
 
   return (
-    <Card className="max-h-64 overflow-x-hidden gap-0 py-0 pt-2 w-1/2 mt-5 pb-2">
+    <Card className="max-h-64 overflow-x-hidden gap-0 py-0 pt-2 xl:w-1/2  mt-5 pb-2">
       <CardHeader className="pl-4 mb-2">
         <CardTitle className="flex items-center gap-2">
           <ArticleIcon size={18} />

client/src/app/home/FrequencyChartBlockedDomains.tsx

@@ -120,7 +120,7 @@ export default function FrequencyChartBlockedDomains() {
     <Card className="h-full overflow-hidden gap-0 py-0 pt-2">
       <CardHeader className="px-4 mb-2">
         <div className="flex justify-between items-center">
-          <CardTitle className="flex text-xl font-bold">
+          <CardTitle className="flex lg:text-xl font-bold">
             <NetworkSlashIcon className="mt-1 mr-2" /> Top Blocked Domains
           </CardTitle>
           <Tabs

client/src/app/home/FrequencyChartTopBlockedClients.tsx

@@ -121,7 +121,7 @@ export default function FrequencyChartTopBlockedClients() {
     <Card className="h-full overflow-hidden gap-0 py-0 pt-2">
       <CardHeader className="px-4 mb-2">
         <div className="flex justify-between items-center">
-          <CardTitle className="flex text-xl font-bold">
+          <CardTitle className="flex lg:text-xl font-bold">
             <UsersIcon className="mt-1 mr-2" />
             Top Clients
           </CardTitle>

client/src/app/home/ResponseSizeTimeline.tsx

@@ -193,12 +193,12 @@ export default function ResponseSizeTimeline() {
       <Card className="overflow-hidden py-2 gap-0">
         <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between sm:space-y-0 px-4">
           <div className="grid sm:text-left">
-            <CardTitle className="flex text-xl">
+            <CardTitle className="lg:flex lg:text-xl">
               Response Size Timeline
-              <p className="text-sm text-muted-foreground mt-1 ml-4">
+              <p className="text-sm text-muted-foreground mt-1 lg:ml-4">
                 {timelineInterval}-Minute Intervals,{" "}
                 {filteredData.length > 0
-                  ? "Last Updated: " +
+                  ? "Updated: " +
                     new Date().toLocaleString("en-US", {
                       month: "short",
                       day: "numeric",

client/src/app/home/request-timeline.tsx

@@ -180,12 +180,14 @@ export default function RequestTimeline() {
       <Card className="overflow-hidden py-2 gap-0">
         <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between sm:space-y-0 px-4">
           <div className="grid sm:text-left">
-            <CardTitle className="flex text-xl">
-              <ChartLineIcon className="mt-1 mr-2" /> Request Timeline
-              <p className="text-sm text-muted-foreground mt-1 ml-4">
+            <CardTitle className="lg:flex lg:text-xl">
+              <div className="flex">
+                <ChartLineIcon className="mt-1 mr-2" /> Request Timeline
+              </div>
+              <p className="text-sm text-muted-foreground mt-1 lg:ml-4">
                 {timelineInterval}-Minute Intervals,{" "}
                 {filteredData.length > 0
-                  ? "Last Updated: " +
+                  ? "Updated: " +
                     new Date().toLocaleString("en-US", {
                       month: "short",
                       day: "numeric",
@@ -201,7 +203,8 @@ export default function RequestTimeline() {
           <div className="flex gap-2">
             {isZoomed && (
               <Button
-                className="bg-transparent border text-white hover:bg-stone-800"
+                variant={"ghost"}
+                className="bg-transparent border text-white"
                 onClick={handleZoomOut}
               >
                 <MagnifyingGlassMinusIcon weight="bold" className="mr-1" />

client/src/app/lists/AddList.tsx

@@ -357,7 +357,7 @@ export function AddList({
           </Button>
         </DialogTrigger>
 
-        <DialogContent className="sm:max-w-250 max-h-[90vh] overflow-y-auto">
+        <DialogContent className="max-w-full lg:max-w-2/3 overflow-y-auto">
           <DialogHeader className="space-y-3 pb-2">
             <div className="flex items-center gap-3">
               <div>
@@ -371,7 +371,7 @@ export function AddList({
             </div>
           </DialogHeader>
 
-          <div className="flex w-full flex-col gap-6">
+          <div className="flex max-w-[90vw] flex-col gap-6">
             <Tabs
               defaultValue="single"
               onValueChange={(val) => setIsMultipleTab(val === "multiple")}
@@ -434,20 +434,19 @@ export function AddList({
                     </p>
                   </div>
 
-                  <div className="space-y-2">
-                    <Label
-                      htmlFor="active"
-                      className="text-muted-foreground flex items-center gap-2"
-                    >
-                      <PowerIcon size={16} />
-                      List active
-                    </Label>
+                  <div className="flex gap-2">
                     <Switch
                       id="active"
                       checked={listActive}
                       onCheckedChange={setListActive}
                       disabled={isSaving}
                     />
+                    <Label
+                      htmlFor="active"
+                      className="text-muted-foreground flex items-center"
+                    >
+                      List active
+                    </Label>
                   </div>
                 </div>
 
@@ -555,14 +554,14 @@ export function AddList({
                                         <h5 className="font-medium text-sm">
                                           {list.name}
                                         </h5>
-                                        <p className="text-xs text-muted-foreground mt-1">
+                                        <p className="text-xs text-muted-foreground">
                                           {list.description}
                                         </p>
                                         <a
                                           href={list.url}
                                           target="_blank"
                                           rel="noopener noreferrer"
-                                          className="text-xs text-blue-500 mt-1 font-mono truncate hover:underline transition-colors"
+                                          className="text-xs text-blue-400 font-mono truncate hover:underline transition-colors"
                                         >
                                           {list.url}
                                         </a>

client/src/app/lists/details.tsx

@@ -196,7 +196,7 @@ export function CardDetails(
           View Details
         </Button>
       </DialogTrigger>
-      <DialogContent className="rounded-xl w-2/3 max-w-200">
+      <DialogContent className="rounded-xl max-w-200">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             {isEditing ? (

client/src/components/header/nav-actions.tsx

@@ -89,7 +89,7 @@ function AboutDialog() {
   }, []);
 
   return (
-    <DialogContent className="w-fit">
+    <DialogContent className="lg:w-fit">
       <DialogHeader>
         <DialogTitle className="flex">
           <InfoIcon className="mr-2 text-blue-500" /> About
@@ -101,7 +101,7 @@ function AboutDialog() {
             <span>{responseData?.version || "Not available"}</span>
 
             <span className="pr-2 text-muted-foreground">Commit:</span>
-            <span className="text-blue-400 underline cursor-pointer">
+            <span className="text-blue-400 underline cursor-pointer text-ellipsis overflow-x-hidden">
               {(responseData?.commit && (
                 <a
                   href={

client/src/pages/blacklist.tsx

@@ -188,10 +188,12 @@ export function Blacklist() {
 
   return (
     <div>
-      <div className="flex gap-5 items-center">
-        <AddList onListAdded={handleListAdded} />
-        <UpdateCustom />
-        <div className="flex gap-4 mb-4">
+      <div className="lg:flex gap-5 items-center">
+        <div className="flex gap-5">
+          <AddList onListAdded={handleListAdded} />
+          <UpdateCustom />
+        </div>
+        <div className="lg:flex gap-4 mb-4">
           <div className="flex items-center gap-2 px-4 py-1 mb-1 bg-accent border-b rounded-t-sm border-b-blue-400">
             <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
             <span className="text-muted-foreground text-sm">Total Lists:</span>
@@ -245,7 +247,7 @@ export function Blacklist() {
           </>
         )}
       </div>
-      <div className="grid lg:grid-cols-3 gap-2">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
         {lists.map((list, index) => (
           <ListCard
             key={index}

client/src/pages/changelog.tsx

@@ -245,8 +245,7 @@ const Changelog = () => {
                               key={commitIdx}
                               className="flex items-start gap-3 group/commit"
                             >
-                              <div className="ml-1 mt-2"></div>
-                              <div className="flex-1 min-w-0">
+                              <div className="flex-1 min-w-0 text-sm">
                                 <div className="flex items-start gap-2">
                                   {commit.hash && (
                                     <a

client/src/pages/logs.tsx

@@ -611,7 +611,7 @@ export function Logs() {
                                             {ipValue[0]?.ip || ""}
                                           </span>
                                           {ipValue.length > 1 && (
-                                            <span className="text-xs text-muted-foreground border px-1 rounded border-green-600/60 shrink-0">
+                                            <span className="text-xs text-muted-foreground bg-card border px-1 rounded border-muted shrink-0">
                                               +{ipValue.length - 1}
                                             </span>
                                           )}

client/src/pages/prefetch.tsx

@@ -313,13 +313,13 @@ export function Prefetch() {
       </Card>
 
       <Card className="shadow-md">
-        <CardHeader className="pb-2">
-          <div className="flex items-center justify-between">
+        <CardHeader className="pb-4 border-b">
+          <div className="lg:flex items-center justify-between">
             <CardTitle className="flex items-center gap-2">
               <ClockIcon className="h-5 w-5 text-blue-500" />
               Active Prefetch Domains
             </CardTitle>
-            <div className="w-64">
+            <div className="mt-2 lg:mt-0">
               <Input
                 placeholder="Search domains..."
                 value={searchTerm}

client/src/pages/resolution.tsx

@@ -154,7 +154,7 @@ export function Resolution() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-5">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
@@ -274,7 +274,7 @@ export function Resolution() {
 
       <Card className="py-4">
         <CardHeader className="pb-4 border-b">
-          <div className="flex items-center justify-between">
+          <div className="lg:flex items-center justify-between">
             <CardTitle className="flex items-center gap-3">
               <div className="bg-blue-500/20 p-2 rounded-lg">
                 <DatabaseIcon className="h-5 w-5 text-blue-400" />
@@ -287,16 +287,14 @@ export function Resolution() {
                 </p>
               </div>
             </CardTitle>
-            <div className="w-72">
-              <div className="relative">
-                <MagnifyingGlassIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="Search domains or IPs..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-9"
-                />
-              </div>
+            <div className="relative mt-2 lg:mt-0">
+              <MagnifyingGlassIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search domains or IPs..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-9"
+              />
             </div>
           </div>
         </CardHeader>