Fix html font size and adjust usage of rem units (#5641)

* Leave default browser font-size for the html

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix preferences helm repos layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust usage of rem units

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust namespace select filter option sizes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing ToBottom btn sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing Remove Cluster dialog sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing catalog sidebar title font-size

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix Notice sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update more snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss

@@ -4,12 +4,22 @@
  */
 
 .repos {
-  @apply mt-6 flex flex-col;
+  display: flex;
+  flex-direction: column;
+  margin-top: calc(var(--margin) * 2);
+}
+
+.repos .repo + .repo {
+  margin-top: calc(var(--margin) * 1.5);
+}
+
+.contents {
+  display: flex;
+  gap: var(--padding);
 }
 
 .repoName {
   font-weight: 500;
-  margin-bottom: 8px;
 }
 
 .repoUrl {

src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx

@@ -40,14 +40,16 @@ const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories, re
         <RemovableItem
           key={repository.name}
           onRemove={() => removeRepository(repository)}
-          className="mt-3"
+          className={styles.repo}
           data-testid={`remove-helm-repository-${repository.name}`}
         >
-          <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
-            {repository.name}
-          </div>
+          <div>
+            <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
+              {repository.name}
+            </div>
 
-          <div className={styles.repoUrl}>{repository.url}</div>
+            <div className={styles.repoUrl}>{repository.url}</div>
+          </div>
         </RemovableItem>
       ))}
     </div>

src/renderer/components/+preferences/removable-item.module.scss

@@ -1,7 +1,8 @@
 .item {
-  --flex-gap: 1.2rem;
+  --flex-gap: 0.5rem;
 
-  @apply rounded-md px-7 py-5 shadow-sm;
   background: var(--inputControlBackground);
   min-height: 65px;
+  border-radius: 3px;
+  padding: calc(var(--padding) * 1.5);
 }