forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

improve styles in clone instructions

the "http" and "ssh" chips were block elements and not inline elements, and would grow according to other items in the flexbox. this pull reworks the clone-card to make chips inline, and enables overflow for urls.

Tangled 5d57f0ab a7d0a5cd

Changed files
+23 -11
appview
pages
templates
repo
+23 -11
appview/pages/templates/repo/index.html
···
{{- end -}}
-
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto">
+
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto flex flex-col gap-4">
+
<div class="flex flex-col gap-2">
<strong>push</strong>
-
<div class="py-2">
-
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
+
<div class="md:pl-4 overflow-x-auto whitespace-nowrap">
+
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
</div>
+
</div>
+
+
<div class="flex flex-col gap-2">
<strong>clone</strong>
-
+
<div class="md:pl-4 flex flex-col gap-2">
-
<div class="flex flex-col gap-2">
-
<div class="pt-2 flex flex-row gap-2">
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
-
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
+
<div class="flex items-center gap-3">
+
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
+
<div class="overflow-x-auto whitespace-nowrap flex-1">
+
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
</div>
-
<div class="pt-2 flex flex-row gap-2">
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span><code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
+
</div>
+
+
<div class="flex items-center gap-3">
+
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span>
+
<div class="overflow-x-auto whitespace-nowrap flex-1">
+
<code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
</div>
+
</div>
</div>
-
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
+
</div>
+
+
+
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
</section>
{{ end }}