From 32ff59ad7a606357593e8db300fa7166b43c3039 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Sat, 21 Sep 2024 20:21:45 +0200
Subject: Fix basic responsive behavior

---
 app/page.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d621ddd..60be7b0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -76,14 +76,14 @@ export default function Cidr() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
-      <div className="max-w-5xl w-full p-8">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-2">
+      <div className="max-w-6xl w-full sm:p-8 p-2">
         <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
           IP / CIDR Calculator
         </h1>
 
         <div className="my-6 text-lg leading-8 text-gray-600">
-          <p>CIDR (Classless Inter-Domain Routing) notation is a compact method for specifying IP address ranges and network masks. It's widely used in network configuration and management.</p>
+          <p>CIDR (Classless Inter-Domain Routing) notation is a compact method for specifying IP address ranges and network masks. It is widely used in network configuration and management.</p>
           <p>An IP address consists of 4 octets, each containing 8 bits that represent values from 0 to 255. In CIDR notation, a forward slash (/) followed by a number indicates the length of the network prefix in bits.</p>
           <p>This prefix length determines the network mask and the number of available host addresses within the specified IP range. This calculator helps you visualize and understand these CIDR blocks, making network planning and configuration easier.</p>
         </div>
@@ -117,12 +117,10 @@ export default function Cidr() {
             />
           </div>
 
-          <div className="text-center text-xl my-10">
-            <div className="bits text-xs">
-              {bits.map((octet, i) => <span key={`octet-${i}`} className="px-4">
-                {octet.map((bit, j) => <span key={`octet-${i}-bit-${j}`} className={`font-mono border-y ${j == 0 && "border-l"} border-r border-gray-700 px-2 py-1 ${i * 8 + j < cidr ? cols[i] : cols[4]}`}>{bit}</span>)}
-              </span>)}
-            </div>
+          <div className="flex flex-wrap justify-center gap-4 my-10">
+            {bits.map((octet, i) => <span key={`octet-${i}`} className="px-1">
+              {octet.map((bit, j) => <span key={`octet-${i}-bit-${j}`} className={`font-mono border-y ${j == 0 && "border-l"} border-r border-gray-700 px-2 py-1 ${i * 8 + j < cidr ? cols[i] : cols[4]}`}>{bit}</span>)}
+            </span>)}
           </div>
 
           <div className="text-center text-xl mb-8 grid grid-cols-1 sm:grid-cols-3 gap-4">
-- 
cgit v1.3.1