monadical/greywall-landing-page
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile view+minor changes

Browse Source
This commit is contained in:
Nik L
2026-03-09 14:20:30 -04:00
parent 585d7c35df
commit 84b16955d7
8 changed files with 94 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/comparison.tsx
View File

@@ -167,24 +167,24 @@ export function Comparison() {
</p>
</div>
{/* Desktop table */}
<div className="hidden md:block rounded-lg border border-border/40 overflow-hidden">
<table className="w-full text-sm">
{/* Table — scrollable on mobile */}
<div className="rounded-lg border border-border/40 overflow-x-auto scrollbar-hide">
<table className="w-full text-sm min-w-[540px]">
<thead>
<tr className="border-b border-border/40 bg-card/40">
<th className="text-left py-3.5 px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
<th className="text-left py-3 sm:py-3.5 px-3 sm:px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Feature
</th>
<th className="text-center py-3.5 px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
<th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
Greywall
</th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
<th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Safehouse
</th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Claude Sandbox
<th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Claude
</th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
<th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Containers
</th>
</tr>
@@ -195,25 +195,25 @@ export function Comparison() {
key={row.feature}
className={`border-b border-border/20 ${i % 2 === 0 ? 'bg-card/10' : ''}`}
>
<td className="py-3 px-4 font-serif text-sm text-foreground">
<td className="py-2.5 sm:py-3 px-3 sm:px-4 font-serif text-sm text-foreground whitespace-nowrap">
{row.feature}
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.greywall} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.safehouse} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.claudeSandbox} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.containers} />
</div>
@@ -224,36 +224,6 @@ export function Comparison() {
</table>
</div>
{/* Mobile cards */}
<div className="md:hidden space-y-2">
{rows.map((row) => (
<div
key={row.feature}
className="p-4 rounded-lg border border-border/30 bg-card/20"
>
<div className="font-serif text-sm text-foreground mb-3">{row.feature}</div>
<div className="grid grid-cols-4 gap-1.5 text-center">
<div>
<div className="text-[10px] font-sans text-primary font-medium mb-1">Greywall</div>
<div className="flex justify-center"><CellIcon value={row.greywall} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Safehouse</div>
<div className="flex justify-center"><CellIcon value={row.safehouse} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Claude</div>
<div className="flex justify-center"><CellIcon value={row.claudeSandbox} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Containers</div>
<div className="flex justify-center"><CellIcon value={row.containers} /></div>
</div>
</div>
</div>
))}
</div>
{/* Legend */}
<div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground">
<div className="flex items-center gap-1.5">