Shrink description box instead of image

[elhil]

I think I found an elegant solution to #28 using built-in properties of flex boxes. Using flex-shrink we can cause the description box to shrink down (to a minimum limit) based on the available space in the column, and for the image to not shrink at all.

This should allow the description box not to be truncated for short images, but will privilege the image when assigning space. It's possible I'm misunderstanding flex-shrink, and that there will still be some mismatches, at which point we can just set a fixed height for the description box. But I suspect this behaves exactly as we want it to.

Resolves #28

[github-actions]

Test QC report built! You can download it here.

[github-actions]

Test QC report built! You can download it here.

[joshuacwnewton]

This is perfect! Approving as I think this is good to merge. :)

I tried some other bits of styling (e.g. having the infobox be a fixed size (i.e. flex-1) to lessen the jitteryness of the resizing infobox) but the empty space felt unnatural, and I like your approach the most.

As an aside, I did have some very minor nitpicks about spacing? But, these are super nitpicky/perfectionistic, and aren't really relevant for the scope of this PR, so we could always save them for a follow-up.

Details

• When the text box is full-size, it doesn't line up with the buttons due to button spacing (blue space below buttons):

  

• The text inside of the textbox looks the slightest bit off due to the text having spacing above the letters (blue space above "SCT"):

  

• The spacing between elements and the outer edge of the viewport is not quite even on the left-right-bottom sides?

  

[github-actions]

Test QC report built! You can download it here.

[elhil]

Nits implemented! With the exception of this one:

• The text inside of the textbox looks the slightest bit off due to the text having spacing above the letters (blue space above "SCT")

because this is a normal typographical thing related to line heights that I think has its own reasons for being there. We could do some hacky thing to line it up but I personally think it's fine as it is, especially now that the other stuff all lines up well.

Another thing I tried as an experiment is to make the description box a fixed height so it doesn't jitter when scrolling. Let me know how you feel about it: do we hate the empty space more than we love the lack of movement? That change is in its own commit so trivial to revert :)

[joshuacwnewton]

Ah! I think there might be another viewport-related issue with the button spacing. When the window is made smaller, the buttons line up:

However when I pop out the dev console and enlarge the window to take up the entire 1080p width, I see:

And highlighting the outer div shows:

I appreciate you taking care of these nits. ♥️

[github-actions]

Test QC report built! You can download it here.

I'm silly, and forgot that there was still an outstanding comment.

[github-actions]

Test QC report built! You can download it here.

[elhil]

Ah! I think there might be another viewport-related issue with the button spacing. When the window is made smaller, the buttons line up:

I hadn't noticed that since my local report was showing Command + Args and therefore the table was taking up more vertical space. Fixed by making the table take up all available space.

[joshuacwnewton]

LGTM!