From dc36ba409c8217850d273ccd732a12e705cef365 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Fri, 2 May 2025 17:40:37 +0200
Subject: [PATCH] Changed the random script button to be the same as all the
 other buttons (#4183)

---
 frontend/src/components/CommandMenu.tsx       | 28 +++++++++++--------
 .../src/components/ui/code-copy-button.tsx    |  4 +--
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/CommandMenu.tsx b/frontend/src/components/CommandMenu.tsx
index 3b48f79d7..d13a730c7 100644
--- a/frontend/src/components/CommandMenu.tsx
+++ b/frontend/src/components/CommandMenu.tsx
@@ -16,7 +16,10 @@ import React from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";
-import { Sparkles } from "lucide-react"; // <- Hinzugefügt
+import { Sparkles } from "lucide-react";
+import { TooltipContent, TooltipProvider } from "./ui/tooltip";
+import { TooltipTrigger } from "./ui/tooltip";
+import { Tooltip } from "./ui/tooltip";
 
 export const formattedBadge = (type: string) => {
   switch (type) {
@@ -111,16 +114,19 @@ export default function CommandMenu() {
           </kbd>
         </Button>
 
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={openRandomScript}
-          title="Open random script"
-          disabled={isLoading}
-          className="h-9 w-9"
-        >
-          <Sparkles className="h-5 w-5" />
-        </Button>
+        <TooltipProvider>
+          <Tooltip delayDuration={100}>
+            <TooltipTrigger asChild>
+              <Button variant="outline" size="icon" onClick={openRandomScript} disabled={isLoading} className="hidden lg:flex">
+                <Sparkles className="size-4" />
+                <span className="sr-only">Open Random Script</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Open Random Script</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
 
       <CommandDialog open={open} onOpenChange={setOpen}>
diff --git a/frontend/src/components/ui/code-copy-button.tsx b/frontend/src/components/ui/code-copy-button.tsx
index edcf0d0e4..70e450d76 100644
--- a/frontend/src/components/ui/code-copy-button.tsx
+++ b/frontend/src/components/ui/code-copy-button.tsx
@@ -41,8 +41,8 @@ export default function CodeCopyButton({
 
   return (
     <div className="mt-4 flex">
-      <Card className="flex items-center overflow-x-auto bg-primary-foreground pl-4">
-        <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm">
+      <Card className="flex items-center overflow-x-auto bg-primary-foreground pl-4 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20">
+        <div className="overflow-x-auto whitespace-pre-wrap text-nowrap break-all pr-4 text-sm [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20">
           {!isMobile && children ? children : "Copy install command"}
         </div>
         <button