This commit is contained in:
Arunavo Ray
2025-07-09 00:47:12 +05:30
parent e4f79720d4
commit eed26e4368
2 changed files with 20 additions and 16 deletions

View File

@@ -127,21 +127,25 @@ export function Installation() {
<div className="flex-grow min-w-0"> <div className="flex-grow min-w-0">
<h3 className="font-semibold mb-2 text-sm sm:text-base">{step.title}</h3> <h3 className="font-semibold mb-2 text-sm sm:text-base">{step.title}</h3>
<div className="relative group"> <div className="relative group">
<pre className="bg-muted/50 rounded-lg p-3 sm:p-4 pr-12 overflow-x-auto text-xs sm:text-sm"> <div className="relative overflow-hidden rounded-lg">
<code className="break-all sm:break-normal">{step.command}</code> <pre className="bg-muted/50 p-3 sm:p-4 pr-10 sm:pr-12 overflow-x-auto text-[11px] sm:text-sm font-mono scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent">
</pre> <code className="block whitespace-nowrap">{step.command}</code>
<Button </pre>
variant="ghost" {/* Scroll indicator gradient for mobile */}
size="icon" <div className="absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-muted/50 to-transparent pointer-events-none sm:hidden" />
className="absolute top-1 right-1 sm:top-2 sm:right-2 w-8 h-8 sm:w-9 sm:h-9 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity" <Button
onClick={() => copyToClipboard(step.command, step.id)} variant="ghost"
> size="icon"
{copiedCommand === step.id ? ( className="absolute top-1 right-1 sm:top-2 sm:right-2 w-7 h-7 sm:w-9 sm:h-9 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity z-10"
<Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-600" /> onClick={() => copyToClipboard(step.command, step.id)}
) : ( >
<Copy className="h-3 w-3 sm:h-4 sm:w-4" /> {copiedCommand === step.id ? (
)} <Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-600" />
</Button> ) : (
<Copy className="h-3 w-3 sm:h-4 sm:w-4" />
)}
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -110,7 +110,7 @@ const structuredData = {
</script> </script>
<!-- 100% privacy-first analytics --> <!-- 100% privacy-first analytics -->
<script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script> <script async src="https://scripts.simpleanalyticscdn.com/latest.js" is:inline></script>
</head> </head>
<body class="min-h-screen bg-background text-foreground antialiased"> <body class="min-h-screen bg-background text-foreground antialiased">