perf: set FontAwesome icons size always static

so they're shown when using SSR as early as possible
remove from NoJS only and use always to improve SSR shifts too
explain it

src/index.html

@@ -108,11 +108,6 @@
           top: 100px;
           min-height: calc(100% - 100px) !important;
         }
-
-        fa-icon > svg {
-          /* Otherwise, doesn't display when JavaScript is disabled */
-          height: 100%;
-        }
       </style>
     </noscript>
   </head>

src/sass/_font-awesome.scss

@@ -0,0 +1,12 @@
+// When JavaScript is disabled and page is pre-rendered with SSR Font Awesome icons seemed to be there in the DOM,
+// but without their size set.
+//
+// Seems size is set dynamically by Font Awesome library. With this trick, we make icons always appear by setting its
+// size. Which also helps with SSR, given there are less layout shifts. As it appears there from early beginning, not
+// until its size is dynamically set
+@mixin iconsStaticSizeFix {
+  fa-icon > svg {
+    /* Otherwise, doesn't display when JavaScript is disabled */
+    height: 100%;
+  }
+}

src/styles.scss

@@ -3,6 +3,7 @@
 @use 'app/header/header-theme';
 @use 'app/no-script/no-script-theme';
 @use 'app/navigation-tabs/navigation-tabs-theme';
+@use 'font-awesome';
 @use 'theming';
 @use 'typographies';
 
@@ -81,3 +82,6 @@ html:not([data-no-motion]) {
   @include about-theme.motion;
   @include navigation-tabs-theme.motion;
 }
+
+// Font Awesome quirk
+@include font-awesome.iconsStaticSizeFix;