refactor(frontend): refactor layout CSS for improved responsiveness

Author: Im-Madhur-Gupta

frontend/app/page.tsx

@@ -2,9 +2,9 @@ import BlockSpawner from '../components/block-spawner'
 
 export default function Home() {
   return (
-    <div className="min-h-screen text-white font-sans max-sm:h-screen max-sm:overflow-hidden">
-      <main className="max-w-6xl mx-auto py-12 px-6 max-md:py-8 max-md:px-6 max-sm:h-full max-sm:flex max-sm:flex-col max-sm:py-4 max-sm:px-4">
-        <h1 className="text-2xl font-bold mb-8 text-center max-md:mb-4 max-sm:shrink-0">
+    <div className="h-screen overflow-hidden text-white font-sans sm:min-h-screen sm:h-auto sm:overflow-visible">
+      <main className="h-full flex flex-col py-4 px-4 max-w-6xl mx-auto sm:block sm:h-auto sm:py-8 sm:px-6 md:py-12">
+        <h1 className="text-2xl font-bold mb-4 text-center shrink-0 md:mb-8">
           Execution Events SDK Showcase
         </h1>
         <BlockSpawner />

frontend/components/block-spawner.tsx

@@ -46,9 +46,9 @@ export default function BlockSpawner() {
     'px-4 py-3 rounded-md font-semibold text-sm text-center animate-slideIn transition-all duration-300 bg-linear-to-br'
 
   return (
-    <div className="w-full p-6 max-md:p-0 max-sm:flex-1 max-sm:flex max-sm:flex-col max-sm:min-h-0">
+    <div className="w-full flex-1 flex flex-col min-h-0 sm:block sm:flex-none md:p-6">
       {/* Controls */}
-      <div className="flex items-center gap-4 mb-8 p-4 bg-[#1a1a2e] rounded-lg flex-wrap max-md:p-3 max-md:gap-3 max-md:mb-2 max-sm:shrink-0">
+      <div className="flex items-center gap-3 mb-2 p-3 bg-[#1a1a2e] rounded-lg flex-wrap shrink-0 md:gap-4 md:mb-8 md:p-4">
         <label htmlFor="speed" className="text-[#a0a0b0] font-medium">
           Speed:
         </label>
@@ -66,20 +66,20 @@ export default function BlockSpawner() {
         <button
           type="button"
           onClick={spawnBlock}
-          className="ml-auto px-6 py-3 bg-linear-to-br from-indigo-500 to-violet-500 text-white border-none rounded-md font-semibold cursor-pointer transition-all duration-150 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/40 active:translate-y-0 max-sm:w-full max-sm:ml-0 max-sm:mt-2 max-sm:px-4 max-sm:py-2"
+          className="w-full mt-2 px-4 py-2 bg-linear-to-br from-indigo-500 to-violet-500 text-white border-none rounded-md font-semibold cursor-pointer transition-all duration-150 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/40 active:translate-y-0 sm:ml-auto sm:w-auto sm:mt-0 sm:px-6 sm:py-3"
         >
           Spawn Block
         </button>
       </div>
 
       {/* Lanes */}
-      <div className="grid grid-cols-4 gap-4 max-sm:grid-cols-2 max-sm:grid-rows-[1fr_1fr] max-sm:flex-1 max-sm:min-h-0 max-md:gap-2">
+      <div className="grid grid-cols-2 grid-rows-[1fr_1fr] flex-1 min-h-0 gap-2 sm:grid-cols-4 sm:grid-rows-none sm:flex-none md:gap-4">
         {/* Proposed Lane */}
-        <div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
-          <h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
+        <div className="bg-[#16162a] rounded-lg p-3 min-h-0 flex flex-col overflow-hidden md:p-4 md:min-h-75 md:block md:overflow-visible">
+          <h3 className="m-0 mb-4 pb-2 shrink-0 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] md:pb-3">
             Proposed
           </h3>
-          <div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
+          <div className="flex flex-col gap-2 overflow-auto flex-1 min-h-0 md:overflow-visible md:flex-none">
             {proposedBlocks.map((block) => (
               <div
                 key={block.id}
@@ -92,11 +92,11 @@ export default function BlockSpawner() {
         </div>
 
         {/* Voted Lane */}
-        <div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
-          <h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
+        <div className="bg-[#16162a] rounded-lg p-3 min-h-0 flex flex-col overflow-hidden md:p-4 md:min-h-75 md:block md:overflow-visible">
+          <h3 className="m-0 mb-4 pb-2 shrink-0 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] md:pb-3">
             Voted
           </h3>
-          <div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
+          <div className="flex flex-col gap-2 overflow-auto flex-1 min-h-0 md:overflow-visible md:flex-none">
             {votedBlocks.map((block) => (
               <div
                 key={block.id}
@@ -109,11 +109,11 @@ export default function BlockSpawner() {
         </div>
 
         {/* Finalized Lane */}
-        <div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
-          <h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
+        <div className="bg-[#16162a] rounded-lg p-3 min-h-0 flex flex-col overflow-hidden md:p-4 md:min-h-75 md:block md:overflow-visible">
+          <h3 className="m-0 mb-4 pb-2 shrink-0 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] md:pb-3">
             Finalized
           </h3>
-          <div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
+          <div className="flex flex-col gap-2 overflow-auto flex-1 min-h-0 md:overflow-visible md:flex-none">
             {finalizedBlocks.map((block) => (
               <div
                 key={block.id}
@@ -126,11 +126,11 @@ export default function BlockSpawner() {
         </div>
 
         {/* Verified Lane */}
-        <div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
-          <h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
+        <div className="bg-[#16162a] rounded-lg p-3 min-h-0 flex flex-col overflow-hidden md:p-4 md:min-h-75 md:block md:overflow-visible">
+          <h3 className="m-0 mb-4 pb-2 shrink-0 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] md:pb-3">
             Verified
           </h3>
-          <div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
+          <div className="flex flex-col gap-2 overflow-auto flex-1 min-h-0 md:overflow-visible md:flex-none">
             {verifiedBlocks.map((block) => (
               <div
                 key={block.id}