From 2a6fbedf8cad0321a318bbd4a26734eb8b221e44 Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Sun, 31 May 2026 04:28:21 +0300
Subject: [PATCH] improve some overlapping layouts on mobile

---
 src/components/code-view.tsx |  18 +-
 src/index.css                |  56 ++++--
 src/pages/repo/shared.tsx    | 351 ++++++++++++++++++-----------------
 3 files changed, 233 insertions(+), 192 deletions(-)

diff --git a/src/components/code-view.tsx b/src/components/code-view.tsx
index 5170088..88b2f4c 100644
--- a/src/components/code-view.tsx
+++ b/src/components/code-view.tsx
@@ -320,7 +320,7 @@ const DiffCollapseButton: Component<{ expanded: boolean; onToggle: () => void }>
 		<Show when={props.expanded} fallback={<UnfoldVertical class="size-4" />}>
 			<FoldVertical class="size-4" />
 		</Show>
-		<span>{props.expanded ? 'collapse all' : 'expand all'}</span>
+		<span class="hidden md:inline">{props.expanded ? 'collapse all' : 'expand all'}</span>
 	</button>
 );
 
@@ -775,7 +775,7 @@ export const PullDiffView: Component<{
 					<DiffStatPill additions={stats().additions} deletions={stats().deletions} />
 					<span
 						class={clsx(
-							'text-xs font-medium transition-colors duration-150',
+							'text-xs font-medium transition-colors duration-150 hidden sm:inline-block',
 							reviewed().size === files().length && files().length > 0
 								? 'text-green-600 dark:text-green-400'
 								: 'text-gray-600 dark:text-gray-400'
@@ -787,13 +787,23 @@ export const PullDiffView: Component<{
 						}
 					</span>
 					<span class="hidden h-5 w-px bg-gray-300 dark:bg-gray-700 sm:inline-block" />
-					<span class="uppercase tracking-wide">diff</span>
+					<span class="uppercase tracking-wide hidden sm:inline-block">diff</span>
 					<span class="rounded border border-gray-300 px-2 py-0.5 font-mono text-xs text-gray-700 dark:border-gray-600 dark:text-gray-200">
 						{props.roundLabel}
 					</span>
 				</div>
-				<div class="untangled-pr-diff-toolbar-actions">
+				<div class="untangled-pr-diff-toolbar-actions flex items-center gap-2">
 					<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
+					<div class="untangled-diff-mode-group">
+						<button type="button" class="untangled-diff-mode-button untangled-diff-mode-button-active">
+							<FileText class="w-4 h-4" />
+							<span class="hidden md:inline">unified</span>
+						</button>
+						<button type="button" class="untangled-diff-mode-button" disabled title="Split diff is not available yet">
+							<Columns2 class="w-4 h-4" />
+							<span class="hidden md:inline">split</span>
+						</button>
+					</div>
 				</div>
 				<div class="untangled-pr-diff-toolbar-history">
 					<SidebarToggleButton
diff --git a/src/index.css b/src/index.css
index e1e6318..7a9049d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -581,20 +581,28 @@
 	.untangled-pr-header-grid,
 	.untangled-pr-diff-grid,
 	.untangled-pr-diff-grid-sidebar-collapsed,
-	.untangled-pr-diff-grid-history-collapsed,
+	.untangled-pr-diff-grid-history-collapsed {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
 	.untangled-pr-diff-toolbar,
 	.untangled-pr-diff-toolbar-sidebar-collapsed,
 	.untangled-pr-diff-toolbar-history-collapsed {
-		grid-template-columns: minmax(0, 1fr);
+		display: flex !important;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		position: static;
 	}
 
-	.untangled-pr-diff-toolbar-main,
-	.untangled-pr-diff-toolbar-actions,
-	.untangled-pr-diff-toolbar-history,
-	.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-main,
-	.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-actions,
-	.untangled-pr-diff-toolbar-sidebar-collapsed .untangled-pr-diff-toolbar-history {
-		grid-column: 1;
+	.untangled-pr-sidebar-toggle,
+	.untangled-pr-diff-toolbar-history {
+		display: none !important;
+	}
+
+	.untangled-pr-diff-file-header,
+	.untangled-diff-view-commit .untangled-diff-file-header {
+		position: static;
 	}
 
 	.untangled-pr-file-tree,
@@ -610,11 +618,6 @@
 }
 
 @media (max-width: 767px) {
-	.untangled-pr-diff-toolbar {
-		align-items: stretch;
-		flex-direction: column;
-	}
-
 	.untangled-pr-summary-card {
 		padding: 1rem;
 	}
@@ -2467,7 +2470,12 @@ details[open] > .untangled-language-bar {
 	display: grid;
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 	gap: 0.5rem;
-	width: fit-content;
+	width: 100%;
+}
+@media (min-width: 640px) {
+	.untangled-repo-actions {
+		width: fit-content;
+	}
 }
 
 .untangled-repo-action {
@@ -3329,13 +3337,27 @@ details[open] > .untangled-language-bar {
 }
 
 @media (max-width: 767px) {
-	.untangled-repo-overview,
-	.untangled-filter-grid {
+	.untangled-repo-overview {
 		grid-template-columns: minmax(0, 1fr);
 	}
 
+	.untangled-filter-grid {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+	}
+
+	.untangled-toggle-group {
+		grid-row: 2;
+		grid-column: 1;
+	}
+
 	.untangled-repo-filter-search {
 		grid-row: 1;
+		grid-column: 1 / span 3;
+	}
+
+	.untangled-filter-grid > a {
+		grid-row: 2;
+		grid-column: 3;
 	}
 
 	.untangled-file-tree-pane {
diff --git a/src/pages/repo/shared.tsx b/src/pages/repo/shared.tsx
index d77cc91..85fd44f 100644
--- a/src/pages/repo/shared.tsx
+++ b/src/pages/repo/shared.tsx
@@ -263,198 +263,207 @@ export const RepoFrame: Component<{
 				</div>
 			</Match>
 			<Match when={repoQuery.data}>
-				{(repo) => (
-					<div class={props.fullWidth ? 'untangled-repo-frame-full' : undefined}>
-						<section id="repo-header" class="mb-2 py-2 px-4">
-							<div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2">
-								<div class="flex flex-col gap-0.5">
-									<div class="flex items-center gap-2 flex-wrap text-lg">
-										<Avatar did={repo().owner.did} size="size-8" />
-										<A href={`/${repo().owner.handle}`} class="font-medium">
-											{repo().owner.handle}
-										</A>
-										<span class="select-none">/</span>
-										<A href={`/${repo().owner.handle}/${repo().slug}`} class="font-bold">
-											{repo().slug}
-										</A>
-									</div>
-									<Show when={sourceRepoInfo()}>
-										{(info) => (
-											<div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 ml-10">
-												<GitFork class="size-3 shrink-0" />
-												<span>forked from</span>
+				{(repo) => {
+					const renderRepoActions = () => (
+						<div class="untangled-repo-actions">
+							<div class="untangled-repo-action">
+								<Show
+									when={starSummaryLoading()}
+									fallback={
+										<Show
+											when={visibleStarSummary()?.isStarred}
+											fallback={
 												<Show
-													when={sourceRepoQuery.data}
+													when={auth.agent()}
 													fallback={
-														<span class="font-semibold">
-															{info().rkey
-																? `${sourceActorQuery.data?.handle ?? info().did}/${info().rkey}`
-																: info().did}
-														</span>
-													}
-												>
-													{(source) => (
-														<A
-															href={`/${source().owner.handle}/${source().slug}`}
-															class="hover:underline font-semibold"
-														>
-															{source().owner.handle}/{source().record.value.name || source().slug}
-														</A>
-													)}
-												</Show>
-											</div>
-										)}
-									</Show>
-								</div>
-
-								<div class="hidden sm:block sm:flex-shrink-0">
-							<div class="untangled-repo-actions">
-								<div class="untangled-repo-action">
-									<Show
-										when={starSummaryLoading()}
-										fallback={
-											<Show
-												when={visibleStarSummary()?.isStarred}
-												fallback={
-													<Show
-														when={auth.agent()}
-														fallback={
-															<a
-																href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/stars`}
-																target="_blank"
-																rel="noreferrer"
-																class="untangled-repo-action-main"
-															>
-																<Star class="size-4" />
-																<span>star</span>
-															</a>
-														}
-													>
-														<button
-															type="button"
+														<a
+															href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/stars`}
+															target="_blank"
+															rel="noreferrer"
 															class="untangled-repo-action-main"
-															disabled={starBusy()}
-															title={starError() ?? undefined}
-															onClick={() => void star()}
 														>
 															<Star class="size-4" />
 															<span>star</span>
-														</button>
-													</Show>
-												}
-											>
-												<button
-													type="button"
-													class="untangled-repo-action-main untangled-repo-action-starred"
-													disabled={starBusy() || !visibleStarSummary()?.currentUserStarRkey}
-													title={starError() ?? undefined}
-													onClick={() => void unstar()}
+														</a>
+													}
 												>
-													<Star class="size-4 fill-current" />
-													<span>unstar</span>
-												</button>
-											</Show>
-										}
-									>
-										<button
-											type="button"
-											class="untangled-repo-action-main"
-											disabled
-											aria-label="Loading stars"
+													<button
+														type="button"
+														class="untangled-repo-action-main"
+														disabled={starBusy()}
+														title={starError() ?? undefined}
+														onClick={() => void star()}
+													>
+														<Star class="size-4" />
+														<span>star</span>
+													</button>
+												</Show>
+											}
 										>
-											<LoaderCircle class="size-4 animate-spin" />
-										</button>
-									</Show>
-									<Show
-										when={starSummaryLoading()}
-										fallback={
-											<a
-												href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/stars`}
-												target="_blank"
-												rel="noreferrer"
-												class="untangled-repo-action-count"
-												title="Starred by"
+											<button
+												type="button"
+												class="untangled-repo-action-main untangled-repo-action-starred"
+												disabled={starBusy() || !visibleStarSummary()?.currentUserStarRkey}
+												title={starError() ?? undefined}
+												onClick={() => void unstar()}
 											>
-												{visibleStarSummary()?.count ?? 0}
-											</a>
-										}
-									>
-										<span class="untangled-repo-action-count" aria-disabled="true">
-											-
-										</span>
-									</Show>
-								</div>
-								<div class="untangled-repo-action">
-									<a
-										href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/fork`}
-										target="_blank"
-										rel="noreferrer"
+												<Star class="size-4 fill-current" />
+												<span>unstar</span>
+											</button>
+										</Show>
+									}
+								>
+									<button
+										type="button"
 										class="untangled-repo-action-main"
+										disabled
+										aria-label="Loading stars"
 									>
-										<GitFork class="size-4" />
-										<span>fork</span>
-									</a>
-									<Show
-										when={forkCountQuery.isLoading}
-										fallback={
-											<a
-												href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/forks`}
-												target="_blank"
-												rel="noreferrer"
-												class="untangled-repo-action-count"
-												title="Forked by"
-											>
-												{forkCountQuery.data ?? 0}
-											</a>
-										}
-									>
-										<span class="untangled-repo-action-count" aria-disabled="true">
-											<LoaderCircle class="size-3 animate-spin" />
-										</span>
-									</Show>
-								</div>
+										<LoaderCircle class="size-4 animate-spin" />
+									</button>
+								</Show>
+								<Show
+									when={starSummaryLoading()}
+									fallback={
+										<a
+											href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/stars`}
+											target="_blank"
+											rel="noreferrer"
+											class="untangled-repo-action-count"
+											title="Starred by"
+										>
+											{visibleStarSummary()?.count ?? 0}
+										</a>
+									}
+								>
+									<span class="untangled-repo-action-count" aria-disabled="true">
+										-
+									</span>
+								</Show>
+							</div>
+							<div class="untangled-repo-action">
 								<a
-									href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/feed.atom`}
+									href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/fork`}
 									target="_blank"
 									rel="noreferrer"
-									class="btn text-sm cursor-pointer list-none flex items-center gap-2"
+									class="untangled-repo-action-main"
 								>
-									<Rss class="size-4" />
-									<span class="hidden md:inline">atom</span>
+									<GitFork class="size-4" />
+									<span>fork</span>
 								</a>
-							</div>
-								</div>
-							</div>
-
-							<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
 								<Show
-									when={repo().record.value.description}
-									fallback={<span class="italic">this repo has no description</span>}
+									when={forkCountQuery.isLoading}
+									fallback={
+										<a
+											href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/forks`}
+											target="_blank"
+											rel="noreferrer"
+											class="untangled-repo-action-count"
+											title="Forked by"
+										>
+											{forkCountQuery.data ?? 0}
+										</a>
+									}
 								>
-									<span>{repo().record.value.description}</span>
+									<span class="untangled-repo-action-count" aria-disabled="true">
+										<LoaderCircle class="size-3 animate-spin" />
+									</span>
 								</Show>
+							</div>
+							<a
+								href={`https://tangled.org/${repo().owner.handle}/${repo().slug}/feed.atom`}
+								target="_blank"
+								rel="noreferrer"
+								class="btn text-sm cursor-pointer list-none flex items-center gap-2"
+							>
+								<Rss class="size-4" />
+								<span class="hidden md:inline">atom</span>
+							</a>
+						</div>
+					);
+
+					return (
+						<div class={props.fullWidth ? 'untangled-repo-frame-full' : undefined}>
+							<section id="repo-header" class="mb-2 py-2 px-4">
+								<div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2">
+									<div class="flex flex-col gap-0.5">
+										<div class="flex items-center gap-2 flex-wrap text-lg">
+											<Avatar did={repo().owner.did} size="size-8" />
+											<A href={`/${repo().owner.handle}`} class="font-medium">
+												{repo().owner.handle}
+											</A>
+											<span class="select-none">/</span>
+											<A href={`/${repo().owner.handle}/${repo().slug}`} class="font-bold">
+												{repo().slug}
+											</A>
+										</div>
+										<Show when={sourceRepoInfo()}>
+											{(info) => (
+												<div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 ml-10">
+													<GitFork class="size-3 shrink-0" />
+													<span>forked from</span>
+													<Show
+														when={sourceRepoQuery.data}
+														fallback={
+															<span class="font-semibold">
+																{info().rkey
+																	? `${sourceActorQuery.data?.handle ?? info().did}/${info().rkey}`
+																	: info().did}
+															</span>
+														}
+													>
+														{(source) => (
+															<A
+																href={`/${source().owner.handle}/${source().slug}`}
+																class="hover:underline font-semibold"
+															>
+																{source().owner.handle}/{source().record.value.name || source().slug}
+															</A>
+														)}
+													</Show>
+												</div>
+											)}
+										</Show>
+									</div>
 
-								<Show when={repo().record.value.website}>
-									<a
-										href={repo().record.value.website}
-										target="_blank"
-										rel="noreferrer"
-										class="flex items-center gap-1"
+									<div class="hidden sm:block sm:flex-shrink-0">
+										{renderRepoActions()}
+									</div>
+								</div>
+
+								<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
+									<Show
+										when={repo().record.value.description}
+										fallback={<span class="italic">this repo has no description</span>}
 									>
-										<Globe class="size-4 shrink-0" />
-										{trimUri(repo().record.value.website!)}
-									</a>
-								</Show>
+										<span>{repo().record.value.description}</span>
+									</Show>
 
-								<Show when={(repo().record.value.topics ?? []).length > 0}>
-									<div class="flex items-center gap-1">
-										<For each={repo().record.value.topics ?? []}>
-											{(topic) => <span class="untangled-topic dark:bg-gray-700">{topic}</span>}
-										</For>
-									</div>
-								</Show>
-							</div>
-						</section>
+									<Show when={repo().record.value.website}>
+										<a
+											href={repo().record.value.website}
+											target="_blank"
+											rel="noreferrer"
+											class="flex items-center gap-1"
+										>
+											<Globe class="size-4 shrink-0" />
+											{trimUri(repo().record.value.website!)}
+										</a>
+									</Show>
+
+									<Show when={(repo().record.value.topics ?? []).length > 0}>
+										<div class="flex items-center gap-1">
+											<For each={repo().record.value.topics ?? []}>
+												{(topic) => <span class="untangled-topic dark:bg-gray-700">{topic}</span>}
+											</For>
+										</div>
+									</Show>
+								</div>
+
+								<div class="block sm:hidden mt-4">
+									{renderRepoActions()}
+								</div>
+							</section>
 
 						<section class="w-full flex flex-col">
 							<nav class="w-full pl-4 overflow-auto">
@@ -487,7 +496,7 @@ export const RepoFrame: Component<{
 							{props.children}
 						</section>
 					</div>
-				)}
+				)}}
 			</Match>
 		</Switch>
 	);
-- 
2.51.2