refactor(style): use class as style selector

src/main/frontend/components/settings.cljs

@@ -150,7 +150,7 @@
         dark? (= "dark" theme)
         switch-theme (if dark? "white" "dark")]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#settings
+      [:div#settings.cp__settings-main
        [:h1.title (t :settings)]
 
        [:div.panel-wrap

src/main/frontend/components/settings.css

@@ -1,4 +1,61 @@
 .cp__settings {
+  &-main {
+    padding-bottom: 20px;
+
+    > h1.title {
+      margin-bottom: .8rem;
+    }
+
+    hr {
+      margin: 1rem 0;
+      opacity: .5;
+    }
+
+    .panel-wrap {
+      padding: 0 12px;
+
+      > .it {
+        margin-bottom: 0;
+        padding-bottom: 15px;
+        align-items: center;
+
+        label {
+          display: flex;
+          align-items: center;
+
+          & + div {
+            display: flex;
+            align-items: center;
+            min-height: 24px;
+            user-select: none;
+
+            .max-w-lg {
+              width: 100%;
+            }
+          }
+        }
+
+        &.app-updater {
+          padding-top: 15px;
+          align-items: start;
+
+          > .wrap {
+            display: block;
+
+            .ver {
+              position: relative;
+              top: -2px;
+            }
+          }
+        }
+
+        .form-select, .form-input {
+          width: 68%;
+        }
+      }
+    }
+  }
+
   &-app-updater {
     min-height: 20px;
     position: relative;
@@ -42,60 +99,3 @@
     }
   }
 }
-
-#settings {
-  padding-bottom: 20px;
-
-  > h1.title {
-    margin-bottom: .8rem;
-  }
-
-  hr {
-    margin: 1rem 0;
-    opacity: .5;
-  }
-
-  .panel-wrap {
-    padding: 0 12px;
-
-    > .it {
-      margin-bottom: 0;
-      padding-bottom: 15px;
-      align-items: center;
-
-      label {
-        display: flex;
-        align-items: center;
-
-        & + div {
-          display: flex;
-          align-items: center;
-          min-height: 24px;
-          user-select: none;
-
-          .max-w-lg {
-            width: 100%;
-          }
-        }
-      }
-
-      &.app-updater {
-        padding-top: 15px;
-        align-items: start;
-
-        > .wrap {
-          display: block;
-
-          .ver {
-            position: relative;
-            top: -2px;
-          }
-        }
-      }
-
-      .form-select, .form-input {
-        width: 68%;
-      }
-    }
-  }
-}

src/main/frontend/components/sidebar.css

@@ -56,11 +56,13 @@
   background-color: var(--ls-primary-background-color);
 
   max-height: 80vh;
-  max-width: 800px;
-  min-width: 62vw;
   overflow: auto;
   margin: -25px;
   padding: 20px;
+
+  @screen sm {
+    width: 768px;
+  }
 }
 
 .cp__sidebar-layout {