diff --git a/frontend/src/app/scripts/_components/ScriptAccordion.tsx b/frontend/src/app/scripts/_components/ScriptAccordion.tsx index d6157e632..4f08ae09a 100644 --- a/frontend/src/app/scripts/_components/ScriptAccordion.tsx +++ b/frontend/src/app/scripts/_components/ScriptAccordion.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef } from "react"; +import { formattedBadge } from "@/components/CommandMenu"; import { Accordion, AccordionContent, @@ -8,12 +9,9 @@ import { } from "@/components/ui/accordion"; import { Category } from "@/lib/types"; import { cn } from "@/lib/utils"; -import { Star } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useState } from "react"; -import { Badge } from "../../../components/ui/badge"; -import { formattedBadge } from "@/components/CommandMenu"; export default function ScriptAccordion({ items, @@ -57,6 +55,7 @@ export default function ScriptAccordion({ value={expandedItem} onValueChange={handleAccordionChange} collapsible + className="overflow-y-scroll max-h-[calc(100vh-210px)] overflow-x-hidden pb-4" > {items.map((category) => ( {" "} {category.scripts @@ -92,7 +89,7 @@ export default function ScriptAccordion({ { return `bash -c "$(wget -qLO - https://github.com/community-scripts/${basePath}/raw/main/${scriptPath})"`; @@ -21,24 +22,29 @@ export default function InstallCommand({ item }: { item: Script }) {

{isAlpine ? ( <> - As an alternative option, you can use Alpine Linux and the {item.name}{" "} - package to create a {item.name} {item.type} container with faster - creation time and minimal system resource usage. You are also - obliged to adhere to updates provided by the package maintainer. + As an alternative option, you can use Alpine Linux and the{" "} + {item.name} package to create a {item.name}{" "} + {getDisplayValueFromType(item.type)} container with faster creation + time and minimal system resource usage. You are also obliged to + adhere to updates provided by the package maintainer. ) : item.type ? ( <> - To create a new Proxmox VE {item.name} {item.type}, run the command - below in the Proxmox VE Shell. + To create a new Proxmox VE {item.name}{" "} + {getDisplayValueFromType(item.type)}, run the command below in the + Proxmox VE Shell. ) : ( - <>To use the {item.name} script, run the command below in the shell. + <> + To use the {item.name} script, run the command below in the shell. + )}

{isAlpine && (

- To create a new Proxmox VE Alpine-{item.name} {item.type}, run the command - below in the Proxmox VE Shell + To create a new Proxmox VE Alpine-{item.name}{" "} + {getDisplayValueFromType(item.type)}, run the command below in the + Proxmox VE Shell

)} diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index d0ca4158f..cf20db2e5 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -119,8 +119,6 @@ } } - - @layer base { * { @apply border-border; @@ -134,7 +132,15 @@ } ::-webkit-scrollbar { - display: none; + width: 9px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.25); + border-radius: 20px; + border: transparent; } .glass {