bug(ui): “Get your token” link overlaps sample-repo buttons

[filipchristiansen]

1. Tick Private Repository (PAT field appears).
2. Click Ingest.

Bug: “Get your token” link overlaps with sample-repo button.

[zamora-carlos]

Hello, I would like to work on this issue.

I noticed that the problem is caused by the position: absolute applied to the input field and the "Get your token" link. A simple solution would be to remove the absolute positioning. I assume position: absolute was originally used to prevent the input elements from shifting when the checkbox is clicked, so I’ll keep that in mind when modifying the styles.

Another improvement can be seen in the following image. The red box shows the actual container of the input elements, which overflows at some md screen widths. A potential fix would be to use two columns on medium screens, and only switch to three columns on lg screens. The second image shows how it would look with two columns:

Currently, the container of the ingestForm has uneven padding on the left and right (pl-8 sm:pl-10 pr-8 sm:pr-16). I believe this was done to avoid overflow caused by the input and the “New” badge. This too could be addressed with the two-column layout on smaller viewports.

Finally, another improvement related to the PAT checkbox is that it currently uses the default browser styling. I think we could restyle it to better match the site’s aesthetics, for example, by making it look similar to the "Max file size" slider thumb.

Please let me know what you think of these suggestions.

[cyclotruc]

@zamora-carlos Those are all very good suggestions, you are more than welcome to work on this and open a PR with your proposed improvements

Let me know if you have any question and thank you very much!