Resized cards threw off my horizontal scrolling. Here is my css fix.

[visproduction 123]

The larger card sizes looks great.  I found my horizontal card scrolls were no longer lining up nicely.  Does anyone else see this?  I might be just me, because I use a lot of custom css.

The left and right scroll bar progressively gets a worse alignment, every scroll.  The default number of cards for the homepage is only 15.  At that number, you hardly see a problem.  Perhaps this tweak is not really needed, if you have not increased the number of cards. 

modules/homesections/homsections.js sets the number of cards in the scroll on the home page.  Setting it up to 'options={Limit:36,' instead of 15.

Anyway, these Custom CSS fixed the horizontal card scroll for me for 1600px wide monitor, for all the Latest card groups on the home page.  However,  I just noticed the slimmer look of the scroll buttons fail for monitors > 1600 pixels wide.

/* Adjust the width and size of the scroll button and width of the shaded vertical bar.  Give the arrow a little green border to make it easier to see. */
.emby-scrollbuttons-scrollbutton {
    margin: 0;
    padding: 4px;
    border: 1px solid #008812;
    font-size: 0.8em;
	}

/* Adjust the shaded scroll button height, so it fills the area better */
.scrollbuttoncontainer {
    top: 9px !important;
    bottom: 36px !important;
}

/* Fix right and left scrolling for cards so they stay aligned */
.padded-right {
padding-right:3.22% !important;
}


/* (related) The See All links on Media collection pages and actor's pages for thumbnail card collection rows are pushed down a little to help mobile portrait padding. */
a.secondaryText.sectionSeeAllButton.noautofocus.button-link.emby-button {
    font-size: 18px;
    text-shadow: 1px 1px 2px #244759;
    margin-top: 37px;
    padding-bottom: 0;
}

 

This looks very close, but not perfect if you have wide cards like Music videos.  The alignment gets only off by about 10 px, after 36 music video cards.  

Another problem, not fixed for all horizontal scrolls including Cast and Crew is, if you go all the way right and click one last time, then the group of cards move out of alignment. Scrolling back left keeps this overlap and the cards are not perfectly aligned anymore.  The function that handles this for Home page latest  is in modules/emby-element-emby-scrollbars-emby-scrollbars.js.  It just does the math for the column width based on the .padding-right class for the row.  This class is in modules.sections.css. 

Is there a snap to flex edge feature in flex?  Maybe a script to run after 500ms to check if the card is aligned correctly and then push it into place?  Or, better yet, just make the right arrow disappear, when there are no more cards to the right.  Then, the user cannot click too far and push the scroll row, out of alignment.   I wonder has anyone even noticed this.

I think maybe the old 4% used to work when there was more cards per screen and therefore more padding areas between cards.  There were 9 visible gaps between cards and now there are 7, so hmm 7/9 * 4 = 3.11.  The width of a scroll button is 55 on a 1600 pixel monitor.  If you remove that 55 pixel width from 1600 = 1545.  That becomes maybe the scroll you want to move.  1600 / 1545 * the new difference in the number of gaps between cards result 3.11 = 3.22186.  Anyway, I think leaving the 4% padding-right to use in the scroll function is off, because the number of gaps between the cards changed from 9 to 7.

Hope this helps.  If you update to 36 cards in the Latest media this fix will make more sense.  It's nice to keep the cards aligned.

 

Edited November 21, 2021 by visproduction