fix(gui): apply small screen CSS changes earlier (fixes #9590) (#9756)

These CSS overrides address issues that are already present on wider
screens, so apply it there. Some experiments show we might even want to
up the limit more, but I am chicken and lazy, so I propose to use the
existing 470px media block.

Supersedes another PR after not getting any reaction to feedback there:
https://github.com/syncthing/syncthing/pull/9591#issuecomment-2212586134

Co-authored-by: Jakob Borg <[email protected]>

gui/default/assets/css/overrides.css

@@ -448,7 +448,6 @@ ul.three-columns li, ul.two-columns li {
 }
 
 @media (max-width:479px) {
-
     nav .dropdown-toggle {
         font-size: 1em;
     }
@@ -456,13 +455,7 @@ ul.three-columns li, ul.two-columns li {
     .navbar-nav .open .dropdown-menu > li > a {
         padding: 12px 15px 12px 25px;
     }
-}
-
-.tab-content {
-    padding-top: 10px;
-}
 
-@media (max-width: 419px) {
     /* The selectors are build to target only the content of folder and device
        panels as it would "destroy" e.g. out of sync or recent changes listings.
        The !important is needed to override .visible-xs that sets display to a
@@ -513,6 +506,10 @@ ul.three-columns li, ul.two-columns li {
     }
 }
 
+.tab-content {
+    padding-top: 10px;
+}
+
 .form-horizontal .form-group {
     margin-bottom: 5px;
 }