From 2cba43780873abf60230ff1e6f42758fe422fc66 Mon Sep 17 00:00:00 2001
From: Deniz <DenizUgur@users.noreply.github.com>
Date: Thu, 23 Nov 2023 16:41:41 -0800
Subject: [PATCH 1/2] sort by ISO

---
 src/construct/coverage.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/construct/coverage.py b/src/construct/coverage.py
index 25a7cf5c..b898e3e9 100644
--- a/src/construct/coverage.py
+++ b/src/construct/coverage.py
@@ -305,6 +305,9 @@ def main():
             spec["link"] = get_document_status_link(spec["ISO"])
             SPEC_INFO.append(spec)
 
+    # Sort by ISO
+    SPEC_INFO = sorted(SPEC_INFO, key=lambda x: x["ISO"])
+
     # Detailed information about boxes
     BOXES = {
         "count": len(files["boxes"]),

From 1eafd88927877ccbf09c130023b27f0276a4ed8d Mon Sep 17 00:00:00 2001
From: Deniz <DenizUgur@users.noreply.github.com>
Date: Thu, 23 Nov 2023 16:42:50 -0800
Subject: [PATCH 2/2] Fix visual bugs in SearchComponent

---
 conformance-search/src/components/Chip.tsx    | 41 ++++++++++-------
 .../src/components/Input/Dropdown.tsx         |  2 +-
 .../Input/variants/ContainerInput.tsx         | 45 ++++++++++++-------
 .../SearchComponent/SearchComponent.tsx       |  2 +-
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/conformance-search/src/components/Chip.tsx b/conformance-search/src/components/Chip.tsx
index ad331191..1fbf6e6b 100644
--- a/conformance-search/src/components/Chip.tsx
+++ b/conformance-search/src/components/Chip.tsx
@@ -1,8 +1,10 @@
+import { Tooltip } from "@mui/material";
 import clsx from "clsx";
 import React from "react";
 
 export default function Chip({
     children,
+    alt,
     type,
     className,
     active,
@@ -10,33 +12,40 @@ export default function Chip({
     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
index ea81e1f4..7c85b27b 100644
--- 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
index 9b1a5b99..ee8738fd 100644
--- 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
index c22855d4..e979d84b 100644
--- 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"