svemagie.net/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: stable height GitHub widget and consistent tab sizing

Browse Source 
- Add min-h-[320px] to prevent layout shift when switching tabs
- Show 5 items per tab for consistent content height
- Simplify tab buttons to text-only at text-xs for compact layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-11 17:58:38 +01:00
parent 6b7bc3644d
commit eedcee70cb
1 changed files with 109 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/widgets/github-repos.njk
+13 -12
View File
@@ -12,37 +12,36 @@
<button
@click="activeTab = 'commits'"
:class="activeTab === 'commits' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
Commits
</button>
<button
@click="activeTab = 'repos'"
:class="activeTab === 'repos' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
Repos
</button>
<button
@click="activeTab = 'featured'"
:class="activeTab === 'featured' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
Featured
</button>
<button
@click="activeTab = 'prs'"
:class="activeTab === 'prs' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
PRs
</button>
</div>
{# Tab content — fixed height container to prevent layout shift #}
<div class="min-h-[320px]">
{# Loading state #}
<div x-show="loading" class="text-sm text-surface-500 py-4 text-center">
Loading...
@@ -51,7 +50,7 @@
{# Commits Tab #}
<div x-show="activeTab === 'commits' && !loading" x-cloak>
<ul x-show="commits.length > 0" class="space-y-3">
<template x-for="commit in commits.slice(0, 6)" :key="commit.sha">
<template x-for="commit in commits.slice(0, 5)" :key="commit.sha">
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="commit.url" target="_blank" rel="noopener" class="block group">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors line-clamp-2" x-text="commit.message"></p>
@@ -70,7 +69,7 @@
{# Repos Tab #}
<div x-show="activeTab === 'repos' && !loading" x-cloak>
<ul x-show="repos.length > 0" class="space-y-3">
<template x-for="repo in repos.slice(0, 8)" :key="repo.name">
<template x-for="repo in repos.slice(0, 5)" :key="repo.name">
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="repo.html_url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2">
@@ -123,7 +122,7 @@
{# PRs Tab #}
<div x-show="activeTab === 'prs' && !loading" x-cloak>
<ul x-show="contributions.length > 0" class="space-y-3">
<template x-for="item in contributions.slice(0, 6)" :key="item.url">
<template x-for="item in contributions.slice(0, 5)" :key="item.url">
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="item.url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2">
@@ -148,6 +147,8 @@
<div x-show="contributions.length === 0" class="text-sm text-surface-500 py-2">No recent PRs or issues.</div>
</div>
</div>
{# Footer link #}
{% if site.feeds.github %}
<a href="https://github.com/{{ site.feeds.github }}" target="_blank" rel="noopener" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-flex items-center gap-1">
@@ -176,7 +177,7 @@ function githubWidget(username) {
];
if (username) {
fetches.push(
fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=10&type=owner`, {
fetch('https://api.github.com/users/' + username + '/repos?sort=updated&per_page=10&type=owner', {
headers: { 'Accept': 'application/vnd.github.v3+json' }
}).then(r => r.ok ? r.json() : null).catch(() => null)
);