demo card sizing nit and hide scroll bars

This commit is contained in:
msukkari 2025-07-29 17:14:24 -07:00
parent f56737e259
commit f888085952
2 changed files with 15 additions and 5 deletions

View file

@ -114,7 +114,7 @@ export const AskSourcebotDemoCards = ({
))} ))}
</div> </div>
<div className="flex flex-wrap justify-center gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 auto-rows-fr">
{demoExamples.searchExamples {demoExamples.searchExamples
.filter((example) => { .filter((example) => {
if (selectedFilterSearchScope === null) return true; if (selectedFilterSearchScope === null) return true;
@ -125,11 +125,11 @@ export const AskSourcebotDemoCards = ({
return ( return (
<Card <Card
key={example.url} key={example.url}
className="cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 hover:border-primary/50 group w-full max-w-[350px]" className="cursor-pointer transition-all duration-200 hover:shadow-md hover:scale-105 hover:border-primary/50 group w-full h-full flex flex-col"
onClick={() => handleExampleClick(example)} onClick={() => handleExampleClick(example)}
> >
<CardContent className="p-4"> <CardContent className="p-4 flex-1 flex flex-col">
<div className="space-y-3"> <div className="space-y-3 flex flex-col h-full">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{searchScopes.map((searchScope) => ( {searchScopes.map((searchScope) => (
<Badge key={searchScope.value} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1"> <Badge key={searchScope.value} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1">
@ -138,7 +138,7 @@ export const AskSourcebotDemoCards = ({
</Badge> </Badge>
))} ))}
</div> </div>
<div className="space-y-1"> <div className="space-y-1 flex-1">
<h4 className="font-semibold text-sm group-hover:text-primary transition-colors line-clamp-2"> <h4 className="font-semibold text-sm group-hover:text-primary transition-colors line-clamp-2">
{example.title} {example.title}
</h4> </h4>

View file

@ -5,6 +5,16 @@
@import "./codemirror-styles.css"; @import "./codemirror-styles.css";
@layer base { @layer base {
html {
overflow-y: scroll;
}
/* Hide scrollbar but keep functionality */
html::-webkit-scrollbar {
width: 0;
background: transparent;
}
:root { :root {
--background: hsl(0 0% 100%); --background: hsl(0 0% 100%);
--background-secondary: hsl(0, 0%, 98%); --background-secondary: hsl(0, 0%, 98%);