fix line number right-align and ensure source code is left-aligned #457

In — https://tangled.sh/did:plc:wshs7t2adsemcrrd4snkeqli/core/blob/master/appview/pages/templates/repo/blob.html — the way the HTML+CSS is set up, the source code lines have line numbers that seem to be intended to be right aligned. However, the implementation ends up shifting the source code right one space as the number of significant digits increases.

I think it's due to how the width is being set using min-width: {{ $tot_chars }}ch. Pretty sure this is what's causing the source code to shift rightward as line numbers grow in digits.

I think this might solve it:

<div class="overflow-auto relative text-ellipsis">
    {{ range $idx, $line := $lines }}
        {{ $linenr := add $idx 1 }}
        <div class="flex">
          <div class="flex-none w-[calc({{$tot_chars}}ch+1.5rem)] text-right pr-6">
            <a href="#L{{ $linenr }}" id="L{{ $linenr }}" class="no-underline peer">
              <span class="{{ $code_number_style }}">
                {{ $linenr }}
              </span>
            </a>
          </div>
          <div class="whitespace-pre peer-target:bg-yellow-200 flex-grow">{{ $line | escapeHtml }}</div>
        </div>
    {{ end }}
</div>

Those changed

• wrap the line number in a fixed-width container using flex-none
• set explicit width using w-[calc({{$tot_chars}}ch+1.5rem)] which includes space for the line number and padding
• apply text-right to this container to right-align the line numbers
• add flex-grow to the code content div to ensure it uses remaining space
• move padding (pr-6) to the container level

I'll try to test this locally ASAP, but it should work.