Import list exclusion edit missing on mobile

jt196 commented 9 months ago

Is there an existing issue for this?

[X] I have searched the existing open and closed issues

Current Behavior

Currently, on screens narrower than about 1000px, the year and spanner icon are missing from the import list exclusion list. They actually appear to be off screen rather than hidden, which makes me think this might not be intended behaviour.

Expected Behavior

Display the spanner on mobile devices. I'd have thought this was essential functionality for the list, the year less important.

I'm not sure if this is intended behaviour or not...

Solution would be to have a break for mobile devices.

<div class="ImportListExclusion-importExclusion-NU7R1">
    <div class="ImportListExclusion-tmdbId-H9u8c">597588</div>
    <div class="ImportListExclusion-movieTitle-TFFFF">Lucky Grandma</div>
    <div class="ImportListExclusion-movieYear-BWA8Y">2019</div>
    <div class="ImportListExclusion-actions-xNNGU"></div>
</div>

I had a little play with the CSS and this should work reasonably well, with titles disappearing behind the ellipsis if they exceed the space, year and spanner both visible:

// allow the content to determine the size
.ImportListExclusion-movieYear-BWA8Y,
.ImportListExclusion-actions-xNNGU {
    flex: 0 0 auto;
}

// Give the tmdb id a set size
.ImportListExclusion-tmdbId-H9u8c {
    flex: 0 0 50px;
}

// stretch and grow according to size
.ImportListExclusion-movieTitle-TFFFF {
    min-width: 0;
    -max width: 100%; // remove this
    flex: 1 0 0%; 
}

At the moment in the browser it looks like multiple elements have flex-basis set to 700px etc. This should allow the movie title to grow or shrink depending on the screen size. Hope this helps.

Steps To Reproduce

No response

Environment

- OS: Mobile
- Radarr: 5.3.5.8570

What branch are you running?

Master

Trace Logs? Not Optional

1000px + - visible

~990px moving off screen

960px gone

915px year is moving off screen

Trace Logs have been provided as applicable. Reports will be closed if the required logs are not provided.

[X] I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain trace - that are relevant and show this issue.

jt196 commented 9 months ago

Nice quick work folks!

Just a quick point, the amendments cause the year to be out somewhere towards the middle of the table if the screen width is wider than about 1000px:

If you're OK with that, then fine!

Another point, if you move the screen below 1000px, the year shifts off to the right. I think this is related to the fact that there's no table header div for the actions column, so it shifts as there's nothing there. I guess you can add a th div with the column header or empty space.

mynameisbogdan commented 9 months ago

It's expected.

jt196 commented 9 months ago

OK Bogdan, and the second point I assume isn't expected...

Good job anyway!

mynameisbogdan commented 9 months ago

Yes, second part too.

Feel free to open a PR if it annoys you that much. 😜

jt196 commented 9 months ago

Ha ok man!

Radarr / Radarr