Broken Material Design Theme

[solonovamax]

Please complete the following tasks.

• Web browser cache cleared
• Link provided to install script if applicable
• Not using broken rtinst install script
• Web browser, ruTorrent, PHP and OS version provided

Tell us about your environment

Web Browser: Firefox 133.0b9
ruTorrent: 5.0.0
PHP: 8.3.13
OS: Arch Linux 6.11.6-zen1-1-zen x86_64

Tell us how you installed ruTorrent

Using the package in the AUR

Describe the bug

The Material Design theme is broken in several ways. See screenshots for non comprehensive list.

Bad icon offsets:

Badly aligned details table background:

Cut off text:

Misaligned checkboxes:

Incorrectly size buttons:

There may be others I missed.

Steps to reproduce

1. Change theme to Material Design
2. Observe broken theme

Expected behavior

Theme is not broken

Additional context

Here are some fixes:

bad icon offsets:

 div#gcont div.row.Header span {
- 	background: transparent url(./images/status_icons.png) no-repeat 0 -288px;
+ 	background: transparent url(./images/status_icons.png) no-repeat 0 -286px;
   padding-left: 17px;
 }
 div#gcont div.row:not(.Header) span.det-hdr {
-	background: transparent url(./images/status_icons.png) no-repeat 0 -306px;
+	background: transparent url(./images/status_icons.png) no-repeat 0 -303px;
   padding-left: 17px;
 }

badly aligned details table background:

 div#gcont div.row > div {
-	background:#181818 url(./images/headers.png) repeat-x 0 -38px;
+	background:#181818 url(./images/headers.png) repeat-x 0 -30px;
 }

cut off text:

-.stable-body td div { font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; height: 16px !important; }
+.stable-body td div { font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; }

-.stable-body td div {font-size: 11px; overflow: hidden; height: 16px !important;}
+.stable-body td div {font-size: 11px; overflow: hidden;}

-.stable-icon {width: 16px; height: 16px; margin-right: -6px; margin: 0 5px; padding: 0 !important; float: left}
+.stable-icon {width: 16px; height: 16px; margin-right: -6px; margin: 0 5px; padding: 0 !important; float: left; position: relative; top: 50%;}

squished sidebar text (there are many instances of this, for whatever reason):

:host {
  display: flex;
  padding: 3px;
  flex-flow: row nowrap;
  align-items: center;
-  height: 16px;
  cursor: pointer;
  overflow: hidden;
  --prefix-color: black;
  --prefix-fontsize: 19px;
  --badge-color: black;
  --badge-background-color: #f0f0f0;
  --status-image: url(../images/tstatus.png);
  --icon-size: 16px;
}

[Airman8]

From what I understand of the new release schedule, v5.0 was intended to get mobile support up and running to a usable extent, but not to iron out all the UI issues that might come up.

v5.1 is coming up for release soon. It is intended for long-term support and has already resolved numerous bugs from v5.0. If you're willing to test the 5.1 beta, it could help to see if these bugfixes will resolve your issues. (For reference, I'm on the 5.1 Beta and I'm not seeing any of the issues you're having in v5.0 with the Material Design theme, so perhaps an upgrade will help.)

[stickz]

Yes that is correct, we'll be releasing v5.1 in the near future with 40 plus bug fixes.

[stickz]

Closing this off as v5.1 is now marked as stable with a resolution to this problem.
https://github.com/Novik/ruTorrent/releases/tag/v5.1.0

[solonovamax]

I've just updated to 5.1.1 (I'm using the AUR package which is out of date, however I manually edited the PKGBUILD to use 5.1.1), and all of these are still present. (I reloaded the page with devtools open & cache disabled, this is not a cache issue)

[stickz]

I've reopened this issue reports to do further testing.

[solonovamax]

after some investigation, the issues with font sizes occurs due to me having a minimum font size set for my browser & the width of the elements being an absolute size rather than relative to the font size (such as em or rem)

unsure what causes the issues with the icon offsets.