2641: Fix optical issue on custom rules

Close #2641

Squashed commit of the following:

commit 3d7280418e42c1607dd644fdbf5faab870470c93
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Feb 15 18:37:11 2021 +0300

    Update changelog order

commit 98e46fe3285b294de5f0b5525611cfb18afb63f3
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Feb 15 18:30:53 2021 +0300

    Update changelog

commit 5342d7c7bc5ca40888a4daeef1526464b861ef29
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Feb 15 18:03:14 2021 +0300

    2641: Fix optical issue on custom rules

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to
 
 ### Fixed
 
+- Optical issue on custom rules ([#2641]).
 - Occasional crashes during startup.
 - The field `"range_start"` in the `GET /control/dhcp/status` HTTP API response
   is now correctly named again ([#2678]).
@@ -42,6 +43,7 @@ and this project adheres to
 - Incorrect version tag in the Docker release ([#2663]).
 - DNSCrypt queries weren't marked as such in logs ([#2662]).
 
+[#2641]: https://github.com/AdguardTeam/AdGuardHome/issues/2641
 [#2653]: https://github.com/AdguardTeam/AdGuardHome/issues/2653
 [#2658]: https://github.com/AdguardTeam/AdGuardHome/issues/2658
 [#2662]: https://github.com/AdguardTeam/AdGuardHome/issues/2662

client/src/components/App/index.css

@@ -5,6 +5,7 @@
     --gray-d8: #d8d8d8;
     --gray-f3: #f3f3f3;
     --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+    --font-size-disable-autozoom: 1rem;
 }
 
 body {
@@ -13,9 +14,10 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
+/* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
 @media screen and (max-width: 767px) {
     input, select, textarea {
-        font-size: 16px !important;
+        font-size: var(--font-size-disable-autozoom);
     }
 }
 

client/src/components/ui/texareaCommentsHighlight.css

@@ -15,7 +15,7 @@
     white-space: pre-wrap;
     line-height: 1.5rem;
     word-wrap: break-word;
-    font-size: 0.9375rem;
+    font-size: var(--font-size-disable-autozoom);
     margin: 0;
 }
 

client/src/install/Setup/Setup.css

@@ -1,6 +1,7 @@
+/* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
 @media screen and (max-width: 767px) {
     input, select, textarea {
-        font-size: 16px !important;
+        font-size: 1rem;
     }
 }
 

client/src/login/Login/Login.css

@@ -1,6 +1,7 @@
+/* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
 @media screen and (max-width: 767px) {
     input, select, textarea {
-        font-size: 16px !important;
+        font-size: 1rem;
     }
 }