Repository: syncthing/syncthing (language: go)

Issue:
WebGUI is displayed incorrectly on "tablet sized" screens

![Screenshot_20220907-112756_Syncthing](https://user-images.githubusercontent.com/45838887/188862658-76a83d83-cc64-4070-a340-c138249f701c.png)


### Version Information

    App Version: 1.20.4 f-droid build
    Syncthing Version: v1.20.4
    Android Version: Android 12.1
    Device: Xiaomi MI 9



Discussion / hints:
This would be a syncthing issue, as the web gui isn't android specific. However the web UI not working well on small screens is partly why the wrapper UI exists. Plus the syncthing web UI is an old piece of hard to maintain code, if anyone wants to improve anything they are welcome but it's hard and unlikely to happen. Or in other words not worth having an open issue for that.
The GUI is actually fine on a small screen. It's the tablet version (which your phone's large screen triggers) that breaks like that. I've seen it break the same way before even on a desktop computer with a small monitor.
@tomasz1986 If you feel this is something that is worth fixing and can be fixed with reasonable effort (no need for you to commit to do it, just your judgment as you have done some work on the UI) - feel free to move the ticket to syncthing and reopen.
I do think this is worth fixing, but I also remember seeing a similar issue in the main repository already. I can't find it now though :sweat:, but it could be something old (from around ~2015) and without the standard `ui` label, so not easy to find without going through the issue list by hand.

I will try to check UI-related issues again and mark the old one to fix if I find it, or open a new one in the main repo if it is just my imagination and the issue doesn't actually exist yet.

Fix patch:
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index 527c5cc59fd..b5b0de59e8a 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -420,15 +420,6 @@ ul.three-columns li, ul.two-columns li {
         height: 276px;
     }
 
-    table.table-auto td,
-    table.table-auto th,
-    table.table-condensed td,
-    table.table-condensed th {
-        /* for mobile phones to allow linebreaks in long repro folder/shared with
-        * columns. */
-        white-space: normal;
-    }
-
     .two-columns {
         -webkit-column-count: 1;
         -moz-column-count: 1;
@@ -488,6 +479,15 @@ ul.three-columns li, ul.two-columns li {
     .modal-footer {
         padding-bottom: 5px;
     }
+
+    table.table-auto td,
+    table.table-auto th,
+    table.table-condensed td,
+    table.table-condensed th {
+        /* for mobile phones to allow linebreaks in long repro folder/shared with
+        * columns. */
+        white-space: normal;
+    }
 }
 
 .form-horizontal .form-group {


Test patch: