fix: ui fixes for playground

apps/playground-web/components/Playground/Playground.tsx

@@ -10,24 +10,24 @@ export default function Playground() {
   return (
     <div
       data-testid="playground"
-      className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900"
+      className="container mx-auto p-4 lg:p-0 flex flex-col flex-grow h-screen bg-white text-gray-900"
     >
       <Header />
 
       <main
         data-testid="playground-main"
-        className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4"
+        className="h-full flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden"
       >
-        <div className="w-full lg:w-7/12 flex flex-col">
+        <div className="h-4/6 lg:h-full w-full lg:w-[60%] flex flex-col">
           <TerminalUI />
         </div>
         <div
           data-testid="searchbox-container"
-          className="w-full lg:w-5/12 flex flex-col"
+          className="h-2/6 lg:h-full w-full lg:w-[40%] flex flex-col pb-4"
         >
           <div
             data-testid="searchbox-wrapper"
-            className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4"
+            className="h-full w-full flex-grow border border-gray-400 bg-gray-100 p-4 pb-0 rounded-lg shadow-md"
           >
             <SearchBox />
           </div>

apps/playground-web/components/Playground/TerminalUI.tsx

@@ -15,7 +15,10 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {
 
   return (
     <>
-      <div className="bg-gray-900 rounded-lg" data-testid="terminal-container">
+      <div
+        className="h-full max-h-[26rem] bg-gray-900 rounded-lg flex flex-col"
+        data-testid="terminal-container"
+      >
         <div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
           <div className="flex space-x-2" data-testid="dice-icons">
             <Dice5 className="w-4 h-4 bg-red-500" />
@@ -24,7 +27,7 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {
           </div>
         </div>
         <div
-          className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
+          className="h-full md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
           data-testid="shell-container"
         >
           <Shell onCommandExecuted={handleCommandExecuted} />
@@ -50,26 +53,31 @@ function TerminalCounter({
       <div className="flex flex-row justify-between text-gray-900 mt-4">
         <div className="flex flex-row items-center space-x-2">
           <div
-            className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
+            className="flex items-center justify-between gap-1 border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
             data-testid="cleanup-timer"
           >
-            <span>Cleanup in: {formatTime(cleanupTimeLeft)} mins</span>
+            <Tooltip message="The time remaining until cleanup is initiated." />
+            <span>
+              <span className="font-semibold">Cleanup in: </span>
+              {formatTime(cleanupTimeLeft)} mins
+            </span>
           </div>
-          <Tooltip message="The time remaining until cleanup is initiated." />
         </div>
 
         <div className="flex flex-row items-center space-x-2">
           <div
-            className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
+            className="flex items-center justify-between gap-1 border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
             data-testid="commands-left"
           >
-            <span>Commands left: {commandsLeft}</span>
+            <Tooltip message="The number of commands you can execute before cleanup." />{' '}
+            <span>
+              <span className="font-semibold">Commands left: </span>
+              {commandsLeft}
+            </span>
           </div>
-          <Tooltip message="The number of commands you can execute before cleanup." />{' '}
-          {/* Tooltip next to text */}
         </div>
       </div>
-      <div className="flex flex-row items-start mt-5">
+      <div className="flex flex-row items-center mt-5 justify-center md:justify-start">
         <Info className="w-4 h-4 text-gray-500 mr-1" />
         <p className="text-sm text-gray-500">
           DiceDB instance is shared across all users.

apps/playground-web/components/Search/CommandPage.tsx

@@ -31,7 +31,7 @@ export default function CommandPage({
   return (
     <div
       data-testid="command-page"
-      className="p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4"
+      className="w-full p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4"
     >
       <h2
         data-testid="command-title"
@@ -65,7 +65,7 @@ export default function CommandPage({
       <div className="bg-gray-200 rounded-lg relative overflow-x-auto p-4">
         <code
           data-testid="command-syntax"
-          className="font-mono text-sm whitespace-pre text-gray-700 inline-block min-w-full"
+          className="font-mono text-sm text-gray-700 block w-full"
         >
           {syntax}
         </code>

apps/playground-web/components/Search/SearchBox.tsx

@@ -16,8 +16,11 @@ export default function SearchBox() {
   );
 
   return (
-    <div className="w-full max-w-3xl mx-auto" data-testid="search-container">
-      <div className="mb-4">
+    <div
+      className="h-full w-full max-w-3xl mx-auto overflow-hidden"
+      data-testid="search-container"
+    >
+      <div className="">
         <div className="flex items-center bg-gray-200 border border-gray-200 rounded px-2">
           <Search className="text-gray-900 mr-2" />
           <input
@@ -30,19 +33,44 @@ export default function SearchBox() {
           />
         </div>
       </div>
-      <div className="mt-4 space-y-4 max-h-[500px] lg:max-h-[870px] xl:max-h-[890px] overflow-y-auto">
-        {search.length > 1 &&
-          filteredCommands.map((cmdMeta) => (
-            <CommandPage
-              key={cmdMeta.title}
-              title={cmdMeta.title}
-              syntax={cmdMeta.syntax}
-              body={cmdMeta.body}
-              url={cmdMeta.url}
-              data-testid={`command-title-${cmdMeta.title}`}
-            />
-          ))}
+      <div className="mt-4 max-w-full space-y-4 h-full overflow-y-auto">
+        {filteredCommands.map((cmdMeta) => (
+          <CommandPage
+            key={cmdMeta.title}
+            title={cmdMeta.title}
+            syntax={cmdMeta.syntax}
+            body={cmdMeta.body}
+            url={cmdMeta.url}
+            data-testid={`command-title-${cmdMeta.title}`}
+          />
+        ))}
+        {filteredCommands.length === 0 && <NotFoundPage />}
       </div>
     </div>
   );
 }
+
+const NotFoundPage = () => {
+  return (
+    <div className="w-full p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4">
+      <h2 className="text-gray-700 text-2xl font-semibold mb-4">
+        No matching data was found🥺
+      </h2>
+
+      <div className="flex items-center justify-between mb-4 pt-4">
+        <h3 className="text-gray-700 text-l font-medium">
+          Try refining your search or browse the documentation for common
+          commands.
+        </h3>
+      </div>
+      <a
+        href="https://dicedb.io/commands/auth/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:text-blue-300 underline font-medium transition-colors duration-200"
+      >
+        View Documentation
+      </a>
+    </div>
+  );
+};

apps/playground-web/components/Search/__tests__/SearchBox.test.tsx

@@ -82,14 +82,7 @@ describe('SearchBox Component', () => {
     }
   });
 
-  it('should not show results when search length is less than 2', async () => {
-    const { searchInputElement } = setupTest();
-    await userEvent.type(searchInputElement, 'A');
-
-    Object.values(DiceCmds).forEach((cmd) => {
-      expect(
-        screen.queryByText(new RegExp(cmd.title, 'i')),
-      ).not.toBeInTheDocument();
-    });
+  it('should show results when search length is 0', async () => {
+    expect(screen.getAllByTestId('command-title').length).toBeGreaterThan(0);
   });
 });

tooling/eslint-config/package.json

@@ -8,12 +8,12 @@
     "react-internal.js"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vercel/style-guide": "^5.2.0",
-    "eslint-config-turbo": "^2.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^2.0.0",
     "eslint-plugin-only-warn": "^1.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
     "typescript": "^5.3.3"
   }
 }