improve some overlapping layouts on mobile
579 unmodified linesExpand all5805815825835845845855865875885895905885915925935945955965975915925935945955965975985996006016026036046056066076086096106115 unmodified lines6176186196206136146156166176216226236241844 unmodified linesExpand all2469247024712472247024732474247524762477247824792480248124822483852 unmodified linesExpand all333633373338333933323333334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366535 unmodified linesExpand all579 unmodified linesExpand all@media (max-width: 1023px) { .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, .untangled-pr-history { position: static; max-height: none;5 unmodified lines
}
@media (max-width: 767px) { .untangled-pr-diff-toolbar { align-items: stretch; flex-direction: column; }
.untangled-pr-summary-card { padding: 1rem; }
1844 unmodified linesExpand all.untangled-repo-actions { 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 { position: relative; z-index: 10;852 unmodified linesExpand all }}
@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 { border-right: 0; }}535 unmodified linesExpand all318 unmodified linesExpand all319320321322323323324325326327446 unmodified linesExpand all7747757767777787787797807817823 unmodified lines78678778878979079079179279379479579579679779879980080180280380480580680780880981050 unmodified lines318 unmodified linesExpand all <button type="button" class="untangled-diff-tool-button" onClick={props.onToggle}> <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>);
const totalDiffStats = (files: DiffFile[]) =>446 unmodified linesExpand all /> <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' )}3 unmodified lines : `${files().length} changed file${files().length === 1 ? '' : 's'}` } </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 visible={historyVisible()}50 unmodified lines261 unmodified linesExpand all26226326426526626726826927027127227327427527627727827928028128228328428526626726826927027127227327427527628727727828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432527928028128232632732832933033133233333428333633733828428528634234334428728834534634734834935035128935335435535635735835936036136236329029129229329429529629729829930030130236536636736836937037137237337437537630330430530630730830937837938038138238338438538638738838939039131031131231331431531631731831932032139439539639739839940040140240340440540640740840941041141241341441532232332432532632732832933033133233333433533633733833934034134234334434541734634734842034935042242335135235342542642742842935443143235535635735835936036136236336436536636743436836937037137237337437537637737837938038138238338443743843944044144244344444544644738538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742844945045145245342943043145545643245743343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047123 unmodified lines495496497498490499500501502503261 unmodified linesExpand all <ErrorState message={getErrorMessage(repoQuery.error)} /> </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" <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" class="untangled-repo-action-main" disabled={starBusy()} title={starError() ?? undefined} onClick={() => void star()} > <Star class="size-4" /> <span>star</span> </button> </Show> } </a> } > <button type="button" class="untangled-repo-action-main untangled-repo-action-starred" disabled={starBusy() || !visibleStarSummary()?.currentUserStarRkey} title={starError() ?? undefined} onClick={() => void unstar()} > <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> );
<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> 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.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 class="hidden sm:block sm:flex-shrink-0"> {renderRepoActions()} </div> </Show> </div> </div> </section>
<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>} > <span>{repo().record.value.description}</span> </Show>
<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"> <div class="flex z-60"> <RepoTabLink23 unmodified lines
{props.children} </section> </div> )} )}} </Match> </Switch> );};