Fix visual bugs in SearchComponent

MPEGGroup · Nov 24, 2023 · 1eafd88 · 1eafd88
1 parent 2cba437
commit 1eafd88
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 33 deletions.
diff --git a/conformance-search/src/components/Chip.tsx b/conformance-search/src/components/Chip.tsx
@@ -1,42 +1,51 @@
+import { Tooltip } from "@mui/material";
 import clsx from "clsx";
 import React from "react";
 
 export default function Chip({
     children,
+    alt,
     type,
     className,
     active,
     score,
     onClick
 }: {
     children: React.JSX.Element | string;
-    type: string;
+    alt?: string;
     className?: string;
+    type?: string | undefined;
     active?: boolean;
     score?: number;
     onClick?: () => void;
 }) {
     return (
-        <button
-            className={clsx(
-                "px-2 py-1",
-                "hover:brightness-90",
-                type === "fourcc" ? "bg-blue-200" : "bg-rose-200",
-                score && score > 0.1 && "opacity-70",
-                active && "border-2 border-black",
-                className
-            )}
-            onClick={onClick}
-            type="button"
-        >
-            <span>{children}</span>
-        </button>
+        <Tooltip placement="bottom" title={alt}>
+            <button
+                className={clsx(
+                    "px-2 py-1",
+                    "hover:brightness-90",
+                    "bg-gray-200",
+                    type === "fourcc" && "!bg-blue-200",
+                    type === "type" && "!bg-rose-200",
+                    score && score > 0.1 && "opacity-70",
+                    active && "border-2 border-black",
+                    className
+                )}
+                onClick={onClick}
+                type="button"
+            >
+                <span>{children}</span>
+            </button>
+        </Tooltip>
     );
 }
 
 Chip.defaultProps = {
     active: false,
+    alt: "",
     className: "",
     onClick: () => {},
-    score: 0
+    score: 0,
+    type: undefined
 };
diff --git a/conformance-search/src/components/Input/Dropdown.tsx b/conformance-search/src/components/Input/Dropdown.tsx
@@ -141,7 +141,7 @@ function Dropdown(
     return (
         <div
             ref={ref}
-            className="mt-[1.5px] flex flex-col gap-3 bg-white p-3 shadow-lg outline outline-1 outline-gray-200"
+            className="mt-[1.5px] flex flex-col gap-3 bg-white p-3 shadow-lg outline outline-1 outline-gray-200 empty:hidden"
             data-testid="dropdown"
         >
             {dropdownSection({

diff --git a/conformance-search/src/components/Input/variants/ContainerInput.tsx b/conformance-search/src/components/Input/variants/ContainerInput.tsx
@@ -150,26 +150,41 @@ export default function ContainerInput({
             <div
                 ref={chipsRef}
                 className={clsx(
-                    "flex max-w-[250px] flex-row flex-nowrap overflow-scroll shadow-sm",
-                    parsed.length > 0 && "mr-2"
+                    "flex-row flex-nowrap shadow-sm",
+                    parsed.length > 0 && "mr-2 flex",
+                    parsed.length === 0 && "hidden"
                 )}
             >
-                {parsed.map((value, i) => (
+                {parsed.length > 4 && (
                     <Chip
-                        key={value}
-                        className={clsx(
-                            "rounded-l-sm",
-                            i === 0 && parsed.length > 1 && "rounded-r-none",
-                            i === parsed.length - 1 && "rounded-r-sm",
-                            i > 0 &&
-                                parsed.length > 1 &&
-                                "rounded-none border-l-1 border-neutral-500"
-                        )}
-                        type={value[0] === "$" ? "fourcc" : "type"}
+                        alt={parsed
+                            .slice(0, parsed.length - 4)
+                            .map((value) => value.substring(1))
+                            .join(".")}
+                        className="rounded-l-sm"
                     >
-                        {value.substring(1)}
+                        &hellip;
                     </Chip>
-                ))}
+                )}
+                {parsed.slice(-4).map((value, idx) => {
+                    const i = parsed.length > 4 ? idx + 1 : idx;
+                    return (
+                        <Chip
+                            key={value}
+                            className={clsx(
+                                "rounded-l-sm",
+                                i === 0 && parsed.length > 1 && "rounded-r-none",
+                                i === parsed.length - 1 && "rounded-r-sm",
+                                i > 0 &&
+                                    parsed.length > 1 &&
+                                    "rounded-none border-l-1 border-neutral-500"
+                            )}
+                            type={value[0] === "$" ? "fourcc" : "type"}
+                        >
+                            {value.substring(1)}
+                        </Chip>
+                    );
+                })}
             </div>
             <div ref={dropdownContainerRef} className="relative flex h-full grow flex-row">
                 <input

diff --git a/conformance-search/src/components/SearchComponent/SearchComponent.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.tsx
@@ -127,7 +127,7 @@ export default function SearchComponent({
                                     <div
                                         // eslint-disable-next-line react/no-array-index-key
                                         key={`${filter.value || filter.type}-${index}`}
-                                        className="flex flex-row items-stretch divide-x-1 overflow-x-scroll px-3"
+                                        className="flex flex-row items-stretch divide-x-1 px-3 max-md:overflow-x-scroll"
                                     >
                                         <button
                                             className="my-3 mr-3 cursor-pointer"