jake/hoot
1
Fork 0
mirror of https://github.com/jakejarvis/hoot.git synced 2025-10-18 20:14:25 -04:00
Code Issues Activity

Update SocialPreview min width

Browse Source
This commit is contained in:
Jake Jarvis
2025-10-13 00:07:58 -04:00
parent 78d0d02991
commit c0591a0cf3
3 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/domain/section.tsx
View File

@@ -86,7 +86,7 @@ export function Section({
/>
</span>
</TooltipTrigger>
<TooltipContent>{help}</TooltipContent>
<TooltipContent side="right">{help}</TooltipContent>
</Tooltip>
</TooltipProvider>
)}

28
components/domain/sections/seo-section.tsx
View File

@@ -158,44 +158,38 @@ export function SeoSection({
value={selectedTab}
onValueChange={(v) => setSelectedTab(v as typeof selectedTab)}
>
<TabsList className="h-auto w-full gap-1 border border-muted-foreground/15 bg-muted/30 md:justify-start dark:bg-muted/50">
<TabsTrigger value="twitter" className="h-9 flex-1 px-2 py-1.5">
<TabsList className="h-11 w-full gap-1 border border-muted-foreground/15 bg-muted/30 md:justify-start dark:bg-muted/50 dark:*:data-[state=active]:bg-accent">
<TabsTrigger value="twitter">
<TwitterIcon
className="md:!h-3.5 md:!w-3.5 h-4 w-4"
className="size-4 md:size-3.5"
aria-hidden="true"
/>
<span className="hidden text-[13px] md:inline">Twitter</span>
</TabsTrigger>
<TabsTrigger
value="facebook"
className="h-9 flex-1 px-2 py-1.5"
>
<TabsTrigger value="facebook">
<FacebookIcon
className="md:!h-3.5 md:!w-3.5 h-4 w-4"
className="size-4 md:size-3.5"
aria-hidden="true"
/>
<span className="hidden text-[13px] md:inline">Facebook</span>
</TabsTrigger>
<TabsTrigger
value="linkedin"
className="h-9 flex-1 px-2 py-1.5"
>
<TabsTrigger value="linkedin">
<LinkedinIcon
className="md:!h-3.5 md:!w-3.5 h-4 w-4"
className="size-4 md:size-3.5"
aria-hidden="true"
/>
<span className="hidden text-[13px] md:inline">LinkedIn</span>
</TabsTrigger>
<TabsTrigger value="discord" className="h-9 flex-1 px-2 py-1.5">
<TabsTrigger value="discord">
<DiscordIcon
className="md:!h-3.5 md:!w-3.5 h-4 w-4"
className="size-4 md:size-3.5"
aria-hidden="true"
/>
<span className="hidden text-[13px] md:inline">Discord</span>
</TabsTrigger>
<TabsTrigger value="slack" className="h-9 flex-1 px-2 py-1.5">
<TabsTrigger value="slack">
<SlackIcon
className="md:!h-3.5 md:!w-3.5 h-4 w-4"
className="size-4 md:size-3.5"
aria-hidden="true"
/>
<span className="hidden text-[13px] md:inline">Slack</span>

5
components/domain/social-preview.tsx
View File

@@ -37,7 +37,7 @@ export function SocialPreview({
if (provider === "twitter") {
if (variant === "compact") {
card = (
<div className="overflow-hidden rounded-2xl border border-[#eff3f4] bg-white text-black dark:border-[#2f3336] dark:bg-black dark:text-white">
<div className="mx-auto w-full max-w-[520px] overflow-hidden rounded-2xl border border-[#eff3f4] bg-white text-black dark:border-[#2f3336] dark:bg-black dark:text-white">
<div className="flex items-stretch">
<div className="relative min-h-[96px] w-24 shrink-0 self-stretch bg-[#f1f5f9] dark:bg-[#0f1419]">
{image ? (
@@ -61,7 +61,7 @@ export function SocialPreview({
<div className="truncate text-[#536471] text-[11px] leading-4 dark:text-[#8b98a5]">
{hostname}
</div>
<div className="mt-0.5 line-clamp-2 font-semibold text-[15px] leading-5">
<div className="mt-0.5 line-clamp-1 font-semibold text-[15px] leading-5">
{title || hostname}
</div>
{description && (
@@ -273,6 +273,7 @@ export function SocialPreview({
data-slot="social-preview"
data-provider={provider}
data-variant={variant}
className="w-full"
>
{card}
</a>