perf: set FontAwesome icons size always static

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;