Implement Stylelint linting of CSS logical properties (#4023)

* Add Stylelint plugin and rule for evaluating use of logical properties * Implement stylelint-advised use of logical properties in SCSS files * Implement stylelint-advised use of logical properties in CSS files * Implement stylelint linting before each commit to any branch of the repo * Remove other Stylelint plugins so that we can add them in later one-by-one After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts. * Add video player to .stylelintignore * Replace non-logical property usage in templates This is not enforced by the plugin at this time. * Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed * Update ft-video-player.css to disable use of logical property linter We want to avoid introducing directionality-specific properties that could muck up the video player. * Remove redundant/unnecessary scripts in package.json
2023-09-14 00:22:33 +00:00 · 2023-09-14 00:22:33 +00:00 · 3db6f437c9
parent d6fd7bec33
commit 3db6f437c9
69 changed files with 374 additions and 373 deletions
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -1,6 +1,5 @@
 {
-  "plugins": ["stylelint-high-performance-animation", "@double-great/stylelint-a11y"],
-  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
+  "plugins": ["stylelint-use-logical-spec"],
  "overrides": [
    {
      "files": ["**/*.scss"],
@ -17,17 +16,6 @@
    }
  ],
  "rules": {
-    "selector-class-pattern": null,
-    "selector-id-pattern": null,
-    "plugin/no-low-performance-animation-properties": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["deep"]
-      }
-    ],
-    "a11y/no-outline-none": true,
-    "a11y/selector-pseudo-class-focus": true,
-    "a11y/font-size-is-readable": true
+    "liberty/use-logical-spec": ["always", { "except": ["float"] }]
  }
 }
--- a/lefthook.yml
+++ b/lefthook.yml
@ -3,13 +3,18 @@
 pre-commit:
  parallel: true
  commands:
-    lint:
+    eslint:
      # Only runs when any file with filename
      # matching the glob is being committed
      glob: "*.{js,vue}"
      run: yarn run eslint --no-color {staged_files}
      skip:
        - rebase
+    stylelint:
+      glob: "*.{css,scss}"
+      run: yarn stylelint --no-color --allow-empty-input {staged_files}
+      skip:
+        - rebase

 # EXAMPLE USAGE
 #
--- a/package.json
+++ b/package.json
@ -33,15 +33,14 @@
    "dev-runner": "node _scripts/dev-runner.js",
    "get-instances": "node _scripts/getInstances.js",
    "get-regions": "node _scripts/getRegions.mjs",
-    "lint-all": "run-p lint lint-json lint-style",
-    "lint-fix": "eslint --fix --ext .js,.vue ./",
-    "lint": "eslint --ext .js,.vue ./",
+    "lint-all": "run-p lint lint-json",
+    "lint": "run-p eslint-lint lint-style",
+    "lint-fix": "run-p eslint-lint-fix lint-style-fix",
+    "eslint-lint": "eslint --ext .js,.vue ./",
+    "eslint-lint-fix": "eslint --fix --ext .js,.vue ./",
    "lint-json": "eslint --ext .json ./",
-    "lint-style": "run-p lint-style:scss lint-style:css",
-    "lint-style:scss": "stylelint \"**/*.scss\"",
-    "lint-style:css": "stylelint \"**/*.css\"",
-    "lint-style-fix:scss": "stylelint --fix \"**/*.scss\"",
-    "lint-style-fix:css": "stylelint --fix \"**/*.css\"",
+    "lint-style": "stylelint \"**/*.{css,scss}\"",
+    "lint-style-fix": "stylelint --fix \"**/*.{css,scss}\"",
    "lint-yml": "eslint --ext .yml,.yaml ./",
    "pack": "run-p pack:main pack:renderer",
    "pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
@ -66,6 +65,7 @@
    "marked": "^9.0.0",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
+    "stylelint-use-logical-spec": "^5.0.0",
    "video.js": "7.21.5",
    "videojs-contrib-quality-levels": "^3.0.0",
    "videojs-http-source-selector": "^1.1.6",
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@ -7,7 +7,7 @@
  display: flex;
  flex-wrap: wrap;
  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  height: 100%;
+  block-size: 100%;
 }

 .routerView {
@ -17,7 +17,7 @@
 }

 .banner {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 20px;
  margin-inline: auto;
 }
@ -35,7 +35,7 @@

 #changeLogText {
  overflow-y: scroll;
-  height: 40vh;
+  block-size: 40vh;
  display: block
 }

@ -53,7 +53,7 @@
  }

  .banner {
-    width: 80%;
+    inline-size: 80%;
    margin-block-start: 20px;
  }

--- a/src/renderer/components/download-settings/download-settings.css
+++ b/src/renderer/components/download-settings/download-settings.css
@ -1,3 +1,3 @@
 .folderDisplay {
-  width: 50vh;
+  inline-size: 50vh;
 }
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
@ -6,16 +6,16 @@
    padding-block: 10px;
    padding-inline: 0;
    text-align: center;
-    width: 100%;
+    inline-size: 100%;
  }

  .frown {
    background-color: var(--card-bg-color);
    font-size: 10em;
-    height: 100%;
+    block-size: 100%;
    padding-block: 20px;
    padding-inline: 0;
    text-align: center;
-    width: 100%;
+    inline-size: 100%;
  }
 }
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@ -1,6 +1,6 @@
 .btn {
  font-family: 'Roboto', sans-serif;
-  min-width: 100px;
+  min-inline-size: 100px;
  font-size: 0.9rem;
  padding-block: 10px;
  padding-inline: 20px;
@ -35,8 +35,8 @@
  content: "";
  display: block;
  position: absolute;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@ -1,7 +1,7 @@
 .bubblePadding {
  position: relative;
-  width: 100px;
-  height: 100px;
+  inline-size: 100px;
+  block-size: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
@ -26,8 +26,8 @@
 }

 .bubble {
-  width: 50px;
-  height: 50px;
+  inline-size: 50px;
+  block-size: 50px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
 }
@ -52,5 +52,5 @@
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
-  width: 100%;
+  inline-size: 100%;
 }
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@ -10,22 +10,22 @@
  border-width: 2px;
  display: block;
  float: var(--float-left-ltr-rtl-value);
-  height: 10px;
+  block-size: 10px;
  inset-inline-start: 5px;
  position: relative;
  inset-block-start: 8px;
-  width: 10px;
+  inline-size: 10px;
 }

 .filled-circle {
  border-radius: 50%;
  background-color: black;
  float: var(--float-left-ltr-rtl-value);
-  height: 6px;
+  block-size: 6px;
  inset-inline-start: 2px;
  inset-block-start: 2px;
  position: relative;
-  width: 6px;
+  inline-size: 6px;
 }

 .option-text {
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@ -3,9 +3,9 @@

 .outside {
  margin: auto;
-  width: 40%;
+  inline-size: 40%;
  @media screen and (max-width: 768px) {
-    width: 100%;
+    inline-size: 100%;
  }
 }

@ -14,16 +14,16 @@
 }

 .communityImage {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }

 .communityThumbnail {
  -webkit-border-radius: 50%;
  border-radius: 50%;
-  height: 55px;
+  block-size: 55px;
  margin-inline-end: 5px;
-  width: 55px;
+  inline-size: 55px;
 }

 .author-div {
@ -54,7 +54,7 @@
  flex-direction: column;
  font-size: 15px;
  margin-block-start: 4px;
-  max-width: 210px;
+  max-inline-size: 210px;
  text-align: start;

  @media screen and (max-width: 680px) {
@ -64,7 +64,7 @@

  .likeBar {
    border-radius: 4px;
-    height: 8px;
+    block-size: 8px;
    margin-block-end: 4px;
  }

@ -82,19 +82,19 @@
    margin-block-end: auto;
    margin-block-start: auto;
    position: relative;
-    width: fit-content;
+    inline-size: fit-content;

    .thumbnailImage {
      display: block;
-      height: auto;
-      max-width: 100%;
-      width: auto;
+      block-size: auto;
+      max-inline-size: 100%;
+      inline-size: auto;
    }
  }

  .playlistText {
    margin-inline-start: 10px;
-    width: 50%;
+    inline-size: 50%;
    word-wrap: break-word;

    .playlistAuthor {
@ -115,7 +115,7 @@
      font-size: small;
      padding-block-start: 10px;
      text-decoration-line: none;
-      width: 100%;
+      inline-size: 100%;
    }

    .playlistPreviewVideoTitle {
@ -123,12 +123,12 @@
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
-      width: 100%;
+      inline-size: 100%;
    }
  }
 }

 .ft-list-item.grid {
-  min-height: 0 !important;
+  min-block-size: 0 !important;
  padding-block-end: 20px;
 }
--- a/src/renderer/components/ft-community-post/slider-style.css
+++ b/src/renderer/components/ft-community-post/slider-style.css
@ -5,7 +5,7 @@
 .tns-nav button {
  background-color: #ddd;
  border-radius: 50%;
-  height: 1.5em;
+  block-size: 1.5em;
  padding: 0;
-  width: 1.5em;
+  inline-size: 1.5em;
 }
--- a/src/renderer/components/ft-element-list/ft-element-list.css
+++ b/src/renderer/components/ft-element-list/ft-element-list.css
@ -1,3 +1,3 @@
 .maxWidth {
-  width: 100%;
+  inline-size: 100%;
 }
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@ -11,9 +11,9 @@
 .iconButton {
  border-radius: 50%;
  cursor: pointer;
-  height: 1em;
+  block-size: 1em;
  transition: background 0.15s ease-out;
-  width: 1em;
+  inline-size: 1em;

  &.shadow {
    box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
@ -144,6 +144,6 @@
    margin-inline: auto;
    // Too "visible" with current color
    opacity: 0.5;
-    width: 95%;
+    inline-size: 95%;
  }
 }
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@ -4,7 +4,7 @@
  padding: 20px;
  border-radius: 5px;
  display: block;
-  width: 60%;
+  inline-size: 60%;
 }

 .ft-tag-box ul {
@ -49,6 +49,6 @@

@media only screen and (max-width: 576px) {
  .ft-input-tags-component {
-    width: 100%;
+    inline-size: 100%;
  }
 }
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@ -96,12 +96,12 @@
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
-  width: 100%;
+  inline-size: 100%;
  padding: 1rem;
  border: none;
  margin-block-end: 10px;
  font-size: 16px;
-  height: 45px;
+  block-size: 45px;
  color: var(--secondary-text-color);
  border-radius: 5px;
  background-color: var(--search-bar-color);
@ -195,7 +195,7 @@

 .list {
  position: absolute;
-  width: 100%;
+  inline-size: 100%;
  list-style: none;
  margin: 0;
  padding-block: 5px;
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
@ -1,7 +1,7 @@
 .grid {
-  min-height: 264px;
+  min-block-size: 264px;
 }

 .list {
-  min-height: 131px;
+  min-block-size: 131px;
 }
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@ -67,7 +67,7 @@
      <div
        v-if="watched"
        class="watchedProgressBar"
-        :style="{width: progressPercentage + '%'}"
+        :style="{inlineSize: progressPercentage + '%'}"
      />
    </div>
    <div class="info">
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@ -19,14 +19,14 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
  padding: 0;
  margin: 0;
 }

 .fullscreen {
-  height: 85vh;
+  block-size: 85vh;
 }

 /*
@ -36,8 +36,8 @@
 */

 .spinner {
-    width: 40px;
-    height: 40px;
+    inline-size: 40px;
+    block-size: 40px;
    position: relative;
    margin-block: 100px;
    margin-inline: auto;
@ -45,8 +45,8 @@

 .double-bounce1,
 .double-bounce2 {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
    border-radius: 50%;
    opacity: 0.6;
    position: absolute;
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@ -1,6 +1,6 @@
 .bubblePadding {
-  width: 100px;
-  height: 115px;
+  inline-size: 100px;
+  block-size: 115px;
  padding-block: 10px 30px;
  padding-inline: 10px;
  cursor: pointer;
@ -19,8 +19,8 @@
 }

 .bubble {
-  width: 70px;
-  height: 70px;
+  inline-size: 70px;
+  block-size: 70px;
  margin-block: 20px 5px;
  margin-inline: auto;
  border-radius: 50%;
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 15px;
  margin-inline: auto;
 }
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 15px;
  margin-inline: auto;
 }
@ -9,7 +9,7 @@
 }

 .profileName {
-  width: 400px;
+  inline-size: 400px;
 }

 .bottomMargin {
@ -17,14 +17,14 @@
 }

 .colorOptions {
-  max-width: 1000px;
+  max-inline-size: 1000px;
  margin-block: 0 30px;
  margin-inline: auto;
 }

 .colorOption {
-  width: 100px;
-  height: 100px;
+  inline-size: 100px;
+  block-size: 100px;
  margin: 10px;
  cursor: pointer;
  border-radius: 50%;
@ -43,6 +43,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 30px;
  margin-inline: auto;
 }
@ -9,7 +9,7 @@
 }

 :deep(.select-label) {
-  width: 95%;
+  inline-size: 95%;
 }

 :deep(.select) {
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@ -1,6 +1,6 @@
 .colorOption {
-  width: 40px;
-  height: 40px;
+  inline-size: 40px;
+  block-size: 40px;
  cursor: pointer;
  align-items: center;
  display: flex;
@ -26,8 +26,8 @@
  position: absolute;
  inset-block-start: 60px;
  inset-inline-end: 10px;
-  min-width: 250px;
-  height: 400px;
+  min-inline-size: 250px;
+  block-size: 400px;
  padding: 5px;
  background-color: var(--card-bg-color);
  box-shadow: 0 0 4px var(--scrollbar-color-hover);
@ -35,13 +35,13 @@

 .profileWrapper {
  margin-block-start: 60px;
-  height: 340px;
+  block-size: 340px;
  overflow-y: auto;
 }

 .profile {
  cursor: pointer;
-  height: 50px;
+  block-size: 50px;
  -webkit-transition: background 0.2s ease-out;
  -moz-transition: background 0.2s ease-out;
  -o-transition: background 0.2s ease-out;
@ -66,7 +66,7 @@
 .profileName {
  display: flex;
  align-items: center;
-  height: 50px;
+  block-size: 50px;
  padding-inline-end: 10px;
 }

--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@ -1,9 +1,9 @@
 .progressBar {
  position: fixed;
-  height: 3px;
+  block-size: 3px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  background-color: var(--primary-color);
  z-index: 1;
-  transition: width 0.5s;
+  transition: inline-size 0.5s;
 }
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
@ -1,7 +1,7 @@
 <template>
  <div
    class="progressBar"
-    :style="{ width: progressBarPercentage + '%' }"
+    :style="{ inlineSize: progressBarPercentage + '%' }"
  />
 </template>

--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@ -2,8 +2,8 @@
  position: fixed;
  inset-block-start: 0px;
  inset-inline-start: 0px;
-  width: 100vw;
-  height: 100vh;
+  inline-size: 100vw;
+  block-size: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  padding: 15px;
@ -17,11 +17,11 @@
  box-sizing: border-box;
  margin-block: 0;
  margin-inline: auto;
-  max-width: 95%;
+  max-inline-size: 95%;
 }

 .promptCard:not(.autosize) {
-  width: 95%;
+  inline-size: 95%;
  margin: 0;
  position: absolute;
  inset-inline-start: 2.5%;
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@ -1,12 +1,12 @@
 pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
-  height: 1px;
+  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
-  width: 1px;
+  inline-size: 1px;
 }

 .pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
@ -33,8 +33,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
-  width: 14px;
-  height: 14px;
+  inline-size: 14px;
+  block-size: 14px;
  margin-block-start: -9px;
  border: 2px solid var(--primary-color);
  text-align: center;
@ -48,8 +48,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 4px;
-  width: 10px;
-  height: 10px;
+  inline-size: 10px;
+  block-size: 10px;
  margin-block-start: -5px;
  transform: scale(0);
  transform-origin: 50%;
@ -66,8 +66,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
  background-color: transparent;
  inset-block-start: 50%;
  inset-inline-start: 4px;
-  width: 8px;
-  height: 3px;
+  inline-size: 8px;
+  block-size: 3px;
  margin-block-start: -4px;
  border-style: solid;
  border-width: 0 0 3px 3px;
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@ -1,11 +1,11 @@
 .searchFilterInner {
-  max-width: 800px;
+  max-inline-size: 800px;
  margin-inline-start: auto;
  margin-inline-end: auto;

  padding-block: 20px 70px;
  padding-inline: 20px;
-  max-height: 410px;
+  max-block-size: 410px;
  overflow-y: auto;

  background-color: var(--card-bg-color);
@ -23,7 +23,7 @@
 }

 .radioFlexBox {
-  max-width: 1000px;
+  max-inline-size: 1000px;
  margin-block: 0;
  margin-inline: auto;
 }
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@ -23,7 +23,7 @@
 /* select starting stylings ------------------------------*/
 .select {
  position: relative;
-  width: 200px;
+  inline-size: 200px;
  padding-block: 0 10px;
  padding-inline: 0 10px;
  margin-block-start: 30px;
@ -39,7 +39,7 @@
  font-family: inherit;
  background-color: transparent;
  color: var(--primary-text-color);
-  width: 240px;
+  inline-size: 240px;
  padding-block: 10px;
  padding-inline: 0 10px;
  font-size: 18px;
@ -108,13 +108,13 @@
 .select-bar {
  position: relative;
  display: block;
-  width: 200px;
+  inline-size: 200px;
 }

 .select-bar:before, .select-bar:after {
  content: '';
-  height: 2px;
-  width: 0;
+  block-size: 2px;
+  inline-size: 0;
  inset-block-end: 1px;
  position: absolute;
  background: var(--accent-color);
@ -131,14 +131,14 @@

 /* active state */
 .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
-  width: 50%;
+  inline-size: 50%;
 }

 /* HIGHLIGHTER ================================== */
 .select-highlight {
  position: absolute;
-  height: 60%;
-  width: 100px;
+  block-size: 60%;
+  inline-size: 100px;
  inset-block-start: 25%;
  inset-inline-start: 0;
  pointer-events: none;
@ -147,17 +147,17 @@

@media only screen and (max-width: 1000px) {
  .select .select-text {
-    max-width: 240px;
+    max-inline-size: 240px;
  }
 }

@media only screen and (max-width: 800px) {
  .select {
-    width: 100%;
+    inline-size: 100%;
  }
  .select .select-text {
    display:block;
-    max-width: 95%;
+    max-inline-size: 95%;
  }
 }

--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@ -2,10 +2,10 @@
  background-color: var(--card-bg-color);
  margin-block: 0;
  margin-inline: auto;
-  width: 85%;
+  inline-size: 85%;

  @media only screen and (max-width: 800px) {
-    width: 100%;
+    inline-size: 100%;
  }

  &[open] {
@ -16,7 +16,7 @@
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 20px;
-    width: 100%;
+    inline-size: 100%;
  }

  > div:not(:last-child, .ft-flex-box) {
@ -29,9 +29,9 @@
 .sectionLine {
  background-color: var(--primary-color);
  border: 0;
-  height: 2px;
+  block-size: 2px;
  margin-block-start: -1px;
-  width: 100%;
+  inline-size: 100%;
 }

 .sectionHeader {
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@ -3,7 +3,7 @@
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  padding: 12px;
-  width: max-content;
+  inline-size: max-content;

  .header {
    color: var(--primary-text-color);
@ -27,12 +27,12 @@
    grid-row: span 3;
    margin-block: 0;
    margin-inline: 12px;
-    width: 1px;
+    inline-size: 1px;
  }

  .youtubeLogo {
-    height: 18px;
-    width: auto;
+    block-size: 18px;
+    inline-size: auto;

    @at-root {
      .dark &,
@ -62,9 +62,9 @@
    .invidiousLogo {
      background-size: cover;
      display: inline-block;
-      height: 20px;
+      block-size: 20px;
      margin-inline-end: 2px;
-      width: 20px;
+      inline-size: 20px;

      @at-root {
        .dark &,
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@ -4,7 +4,7 @@
  --pure-material-safari-helper3: var(--accent-color-opacity3);
  --pure-material-safari-helper4: var(--accent-color-opacity4);
  display: inline-block;
-  width: 380px;
+  inline-size: 380px;
  color: rgba(var(--primary-text-color), 0.87);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 16px;
@ -22,8 +22,8 @@
  display: block;
  margin-block: 0 -36px;
  margin-inline: 0;
-  width: 100%;
-  height: 36px;
+  inline-size: 100%;
+  block-size: 36px;
  background-color: transparent;
  cursor: pointer;
 }
@ -60,8 +60,8 @@
  margin-block: 17px;
  margin-inline: 0;
  border-radius: 1px;
-  width: 100%;
-  height: 2px;
+  inline-size: 100%;
+  block-size: 2px;
  background-color: var(--accent-color-opacity4);
 }

@ -71,8 +71,8 @@
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
-  height: 2px;
-  width: 2px;
+  block-size: 2px;
+  inline-size: 2px;
  background-color: var(--accent-color);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
@ -113,8 +113,8 @@
  margin-block: 0;
  margin-auto: 17px;
  border-radius: 1px;
-  width: 100%;
-  height: 2px;
+  inline-size: 100%;
+  block-size: 2px;
  background-color: var(--accent-color-opacity4);
 }

@ -124,8 +124,8 @@
  -moz-appearance: none;
  border: none;
  border-radius: 50%;
-  height: 2px;
-  width: 2px;
+  block-size: 2px;
+  inline-size: 2px;
  background-color: var(--accent-color);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
@ -134,7 +134,7 @@
 /* Moz | Progress */
 .pure-material-slider > input::-moz-range-progress {
  border-radius: 1px;
-  height: 2px;
+  block-size: 2px;
  background-color: var(--accent-color);
 }

@ -183,21 +183,21 @@
  border-radius: 1px;
  padding-block: 0;
  padding-inline: 17px;
-  width: 100%;
-  height: 2px;
+  inline-size: 100%;
+  block-size: 2px;
  background-color: transparent;
 }

 .pure-material-slider > input::-ms-fill-lower {
  border-radius: 1px;
-  height: 2px;
+  block-size: 2px;
  background-color: var(--accent-color);
 }

 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
  border-radius: 1px;
-  height: 2px;
+  block-size: 2px;
  background-color: var(--accent-color-opacity4);
 }

@ -208,8 +208,8 @@
  margin-inline: 17px;
  border: none;
  border-radius: 50%;
-  height: 2px;
-  width: 2px;
+  block-size: 2px;
+  inline-size: 2px;
  background-color: var(--accent-color);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
@ -251,6 +251,6 @@

@media only screen and (max-width: 680px) {
  .pure-material-slider {
-    width: 100%;
+    inline-size: 100%;
  }
 }
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@ -4,7 +4,7 @@
  padding-inline: 10px;

  @media only screen and (max-width: 680px) {
-    width: 100%;
+    inline-size: 100%;
  }

  .sponsorTitle {
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@ -1,6 +1,6 @@
 .subscribeButton {
  align-self: center;
-  height: 50%;
+  block-size: 50%;
  margin-block-end: 10px;
-  min-width: 150px;
+  min-inline-size: 150px;
 }
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@ -12,12 +12,12 @@

 .switch-input {
  appearance: none;
-  height: 20px;
+  block-size: 20px;
  inset-inline-start: -3px;
  position: absolute;
  inset-block-start: calc(50% - 3px);
  transform: translate(0, -50%);
-  width: 34px;
+  inline-size: 34px;
 }

 .switch-label {
@ -43,9 +43,9 @@
  &::before {
    background-color: #9e9e9e;
    border-radius: 8px;
-    height: 14px;
+    block-size: 14px;
    inset-inline-start: 1px;
-    width: 34px;
+    inline-size: 34px;

    .switch-input:checked + & {
      background-color: var(--accent-color-light);
@ -60,9 +60,9 @@
    background-color: #fafafa;
    border-radius: 50%;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
-    height: 20px;
+    block-size: 20px;
    inset-inline-start: 0;
-    width: 20px;
+    inline-size: 20px;

    .switch-input:checked + & {
      background-color: var(--accent-color);
@ -75,7 +75,7 @@
  }

  @media (max-width: 680px) {
-    max-width: 250px;
+    max-inline-size: 250px;
  }
 }

--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@ -38,8 +38,8 @@
  font-size: 1rem;
  line-height: 120%;
  margin: 0;
-  max-width: max-content;
-  min-width: 15em;
+  max-inline-size: max-content;
+  min-inline-size: 15em;
  opacity: 0;
  padding-block: 10px;
  padding-inline: 8px;
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@ -1,9 +1,10 @@
+/* stylelint-disable liberty/use-logical-spec */
 .relative {
  position: relative;
 }

 .ftVideoPlayer {
-  width:100%;
+  width: 100%;
 }

 .ftVideoPlayer.vjs-user-inactive {
@ -16,14 +17,15 @@
 }

 :deep(.sponsorBlockMarker) {
-  height: 100%;
+  block-size: 100%;
  background-color: var(--primary-color);
 }

 :deep(.chapterMarker) {
  height: 100%;
-  inset-block-start: 0;
+  top: 0;
  width: 2px;
  z-index: 2;
  background-color: #000;
 }
+/* stylelint-enable liberty/use-logical-spec */
--- a/src/renderer/components/general-settings/general-settings.css
+++ b/src/renderer/components/general-settings/general-settings.css
@ -1,10 +1,10 @@
 .select {
-  min-width: 240px;
-  width: auto;
+  min-inline-size: 240px;
+  inline-size: auto;
 }

 /* https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors */
 .select:deep(.select-text) {
-  min-width: 240px;
-  width: auto;
+  min-inline-size: 240px;
+  inline-size: auto;
 }
--- a/src/renderer/components/password-dialog/password-dialog.css
+++ b/src/renderer/components/password-dialog/password-dialog.css
@ -1,9 +1,9 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin: auto;
  box-sizing: border-box;
 }

 .passwordInput {
-  width: 100%;
+  inline-size: 100%;
 }
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@ -7,7 +7,7 @@
  column-gap: 1rem;
  margin-block: 0;
  margin-inline: auto;
-  width: 95%;
+  inline-size: 95%;

  .screenshotFolderLabel,
  .screenshotFolderButton,
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@ -1,10 +1,10 @@
 .playListThumbnail {
-  width: 100%;
+  inline-size: 100%;
 }

 .playlistThumbnail img {
  cursor: pointer;
-  width: 100%;
+  inline-size: 100%;

  @media only screen and (max-width: 800px) {
    display: none;
@ -25,12 +25,12 @@
 }

 .playlistDescription {
-  max-height: 20vh;
+  max-block-size: 20vh;
  overflow-y: auto;
  white-space: break-spaces;

  @media only screen and (max-width: 500px) {
-    max-height: 10vh;
+    max-block-size: 10vh;
  }
 }

@ -39,14 +39,14 @@
  color: inherit;
  display: flex;
  gap: 8px;
-  height: 40px;
+  block-size: 40px;
  text-decoration: none;
 }

 .channelThumbnail {
  border-radius: 200px;
  float: var(--float-left-ltr-rtl-value);
-  width: 40px;
+  inline-size: 40px;
 }

 .channelName {
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@ -31,7 +31,7 @@
  position: fixed;
  background-color: var(--side-nav-color);
  inset-block-end: 60px;
-  width: 70px;
+  inline-size: 70px;
  z-index: 0;
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@ -45,23 +45,23 @@

  .sideNav, .closed {
    margin-block-start: 0px;
-    height: 60px;
-    width: 100%;
+    block-size: 60px;
+    inline-size: 100%;
    inset-block-end: 0px;
    inset-block-start: auto;
    overflow-y: inherit;
  }

  .navOption, .closed .navOption {
-    width: 70px;
-    height: 40px;
+    inline-size: 70px;
+    block-size: 40px;
    padding-block: 10px;
    padding-inline: 0;
  }

  .navLabel {
    margin-inline-start: 0px;
-    width: 100%;
+    inline-size: 100%;
    text-align: center;
    inset-inline-start: 0px;
    font-size: 11px;
@ -69,7 +69,7 @@

  .navIcon {
    margin-inline-start: 0px;
-    width: 100%;
+    inline-size: 100%;
    display: block;
    margin-block-start: 0.5em;
  }
@ -79,6 +79,6 @@
  }

  .closed .navIconExpand{
-    height:1.3em;
+    block-size:1.3em;
  }
 }
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@ -1,7 +1,7 @@
 .sideNav {
  display: block;
-  height: calc(100vh - 60px);
-  width: 200px;
+  block-size: calc(100vh - 60px);
+  inline-size: 200px;
  overflow-x: hidden;
  position: sticky;
  inset-inline-start: 0;
@ -9,7 +9,7 @@
  z-index: 3;
  box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
  background-color: var(--side-nav-color);
-  transition-property: width;
+  transition-property: inline-size;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  user-select: none;
@ -17,22 +17,22 @@
 }

 .inner {
-  height: 100%;
-  width: 200px;
+  block-size: 100%;
+  inline-size: 200px;
  overflow-y: auto;
  overflow-x: hidden;
 }

 .closed .inner {
-  width: 80px;
+  inline-size: 80px;
 }

 .closed .hiddenLabels {
-  width: 60px;
+  inline-size: 60px;
 }

 .closed.hiddenLabels {
-  width: 60px;
+  inline-size: 60px;
 }

 .topNavOption {
@ -42,7 +42,7 @@
 .navOption, .navChannel {
  position: relative;
  padding: 5px;
-  min-height: 35px;
+  min-block-size: 35px;
  -webkit-user-drag: none;
 }

@ -84,7 +84,7 @@
 }

 .thumbnailContainer {
-  width: 35px;
+  inline-size: 35px;
  margin: 0;
  position: absolute;
  inset-block-start: 50%;
@ -104,12 +104,12 @@
 }

 .closed {
-  width: 80px;
+  inline-size: 80px;
 }

 .sideNav hr {
-  width: 90%;
-  height: 1px;
+  inline-size: 90%;
+  block-size: 1px;
  border: 0;
  background-color: var(--primary-color);
 }
@ -125,24 +125,24 @@
 }

 .closed .navOption {
-  width: 100%;
+  inline-size: 100%;
  padding-block: 5px;
  padding-inline: 0;
 }

 .closed .navIcon {
  margin-inline-start: 0px;
-  width: 100%;
+  inline-size: 100%;
  display: block;
  margin-block-end: 0px;
 }
 .closed .navIconExpand{
-  height:1.3em;
+  block-size:1.3em;
 }

 .closed .navLabel {
  margin-inline-start: 0px;
-  width: 100%;
+  inline-size: 100%;
  text-align: center;
  inset-inline-start: 0px;
  font-size: 11px;
@ -150,8 +150,8 @@
 }

 .closed .navChannel {
-  width: 100%;
-  height: 45px;
+  inline-size: 100%;
+  block-size: 45px;
  padding-block: 5px;
  padding-inline: 0;
 }
@ -194,16 +194,16 @@

  .sideNav, .closed {
    margin-block-start: 0px;
-    height: 60px;
-    width: 100%;
+    block-size: 60px;
+    inline-size: 100%;
    inset-block-end: 0px;
    inset-block-start: auto;
    overflow-y: hidden;
  }

  .navOption, .closed .navOption {
-    width: 70px;
-    height: 40px;
+    inline-size: 70px;
+    block-size: 40px;
    padding: 0px;
    padding-block-start: 10px;
    padding-block-end: 10px;
@ -211,7 +211,7 @@

  .navLabel {
    margin-inline-start: 0px;
-    width: 100%;
+    inline-size: 100%;
    text-align: center;
    inset-inline-start: 0px;
    font-size: 11px;
@ -221,6 +221,6 @@
    display: block;
  }
  .closed.hiddenLabels{
-    width: 100%;
+    inline-size: 100%;
  }
 }
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -22,6 +22,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@ -13,13 +13,13 @@
  background-color: var(--card-bg-color);
  box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
  display: flex;
-  height: 60px;
+  block-size: 60px;
  inset-inline-start: 0;
  line-height: 60px;
  position: sticky;
  inset-inline-end: 0;
  inset-block-start: 0;
-  width: 100%;
+  inline-size: 100%;
  z-index: 4;

  @media only screen and (min-width: 961px) {
@ -47,10 +47,10 @@
  color: var(--primary-text-color);
  cursor: pointer;
  font-size: 20px;
-  height: 1em;
+  block-size: 1em;
  padding: 10px;
  transition: background 0.2s ease-out;
-  width: 1em;
+  inline-size: 1em;

  @include top-nav-is-colored {
    color: var(--text-with-main-color);
@ -144,8 +144,8 @@
      background-position: right top;
      background-repeat: no-repeat;
      background-size: 25px;
-      height: 25px;
-      width: 25px;
+      block-size: 25px;
+      inline-size: 25px;

      @include top-nav-is-colored {
        background-image: var(--logo-icon-bar-color);
@ -157,11 +157,11 @@
      background-position: right top;
      background-repeat: no-repeat;
      background-size: 100px;
-      height: 40px;
+      block-size: 40px;
      margin-inline-start: 5px;
      position: relative;
      inset-block-start: -3px;
-      width: 100px;
+      inline-size: 100px;

      @media only screen and (max-width: 680px) {
        display: none;
@ -176,7 +176,7 @@

 .middle {
  flex: 1;
-  max-width: 440px;
+  max-inline-size: 440px;

  .searchContainer {
    align-items: center;
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@ -14,7 +14,7 @@

 .chaptersWrapper {
  margin-block-start: 15px;
-  max-height: 250px;
+  max-block-size: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
@ -22,7 +22,7 @@
 }

 .chaptersWrapper.compact {
-  max-height: 200px;
+  max-block-size: 200px;
 }

 .chaptersChevron {
@ -53,8 +53,8 @@

 .chapterThumbnail {
  grid-area: thumbnail;
-  width: 130px;
-  height: auto;
+  inline-size: 130px;
+  block-size: auto;
  margin: 3px;
 }

--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@ -44,8 +44,8 @@

 .commentThumbnail {
  float: var(--float-left-ltr-rtl-value);
-  width: 60px;
-  height: 60px;
+  inline-size: 60px;
+  block-size: 60px;
  border-radius: 200px;
  -webkit-border-radius: 200px;
 }
@ -55,8 +55,8 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  width: 60px;
-  height: 60px;
+  inline-size: 60px;
+  block-size: 60px;
  font-size: 20px;
  line-height: 1em;
  text-transform: capitalize;
@ -111,17 +111,16 @@

 .commentMemberIcon {
  margin-inline-start: 5px;
-  width: 14px;
-  height: 14px;
+  inline-size: 14px;
+  block-size: 14px;
 }

 .commentSubscribedIcon {
  content: var(--logo-icon);
-  height: 14px;
-  width: 14px;
+  block-size: 14px;
+  inline-size: 14px;
  vertical-align: middle;
-  margin-left: 0.25em;
-  margin-right: 0.25em;
+  margin-inline: 0.25em;
 }

 .commentLikeCount {
@ -133,8 +132,8 @@
 .commentHeartBadge {
  display: inline-block;
  position: relative;
-  width: 25px;
-  height: 20px;
+  inline-size: 25px;
+  block-size: 20px;
  margin-inline-start: 10px;
  margin-block-end: -7px;
 }
@ -142,8 +141,8 @@
 .commentHeartBadgeImg {
  position: absolute;
  inset-inline-start: 0;
-  width: 15px;
-  height: 15px;
+  inline-size: 15px;
+  block-size: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
 }
@ -152,8 +151,8 @@
  position: absolute;
  inset-inline-start: 9px;
  inset-block-end: 1px;
-  width: 11px;
-  height: 11px;
+  inline-size: 11px;
+  block-size: 11px;
  z-index: 1;
 }

@ -162,8 +161,8 @@
  color: var(--red-500);
  inset-inline-start: 10px;
  inset-block-end: 2px;
-  width: 9px;
-  height: 9px;
+  inline-size: 9px;
+  block-size: 9px;
  z-index: 2;
 }

--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@ -1,6 +1,6 @@
 .videoDescription {
  overflow-y: auto;
-  max-height: 300px;
+  max-block-size: 300px;
 }

 .description {
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@ -28,7 +28,7 @@
    border-radius: 50%;
    cursor: pointer;
    margin-inline-end: 10px;
-    width: 56px;
+    inline-size: 56px;
  }

  .channelName {
@ -66,7 +66,8 @@
 }

 .datePublished {
-  margin: 4px 0 0;
+  margin-block: 4px 0;
+  margin-inline: 0;

  @media screen and (max-width: 680px) {
    margin-block-start: 16px;
@ -80,7 +81,7 @@
  font-size: 16px;
  margin-inline-start: auto;
  margin-block-start: 4px;
-  max-width: 210px;
+  max-inline-size: 210px;
  text-align: end;

  @media screen and (max-width: 680px) {
@ -90,7 +91,7 @@

  .likeBar {
    border-radius: 4px;
-    height: 8px;
+    block-size: 8px;
    margin-block-end: 4px;
  }

--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@ -1,5 +1,5 @@
 .card.hasError {
-  height: auto !important;
+  block-size: auto !important;
  padding: 16px;
 }

@ -8,8 +8,8 @@
 }

 .messageContainer {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
@ -36,7 +36,7 @@
 }

 .errorIcon {
-  width: 100%;
+  inline-size: 100%;
  color: var(--tertiary-text-color);
  font-size: 100px;
 }
@ -49,8 +49,8 @@
 }

 .superChatComments {
-  width: 100%;
-  height: 50px;
+  inline-size: 100%;
+  block-size: 50px;
  overflow-x: auto;
  white-space: nowrap;
 }
@ -61,7 +61,7 @@
  padding-inline-end: 10px;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
-  height: 30px;
+  block-size: 30px;
  cursor: pointer;
  background-color: var(--primary-color);
  border-radius: 200px;
@ -77,7 +77,7 @@
 .superChat .channelThumbnail {
  margin-block-start: 3px;
  margin-inline-start: 3px;
-  height: 25px;
+  block-size: 25px;
 }

 .donationAmount {
@ -86,8 +86,8 @@

 .openedSuperChat {
  background-color: rgba(0, 0, 0, 0.7);
-  width: 100%;
-  height: 415px;
+  inline-size: 100%;
+  block-size: 415px;
  position: absolute;
  margin-inline-start: -16px;
  padding-inline-end: 32px;
@ -109,7 +109,7 @@
 }

 .comment {
-  width: 100%;
+  inline-size: 100%;
  padding-block: 5px 7px;
  display: grid;
  grid-template-columns: min-content auto;
@ -117,7 +117,7 @@
 }

 .superChatMessage {
-  width: 90%;
+  inline-size: 90%;
  grid-template-columns: auto;
  margin-inline-start: 5%;
  margin-inline-end: 5%;
@ -131,15 +131,15 @@

 .upperSuperChatMessage {
  margin-block-start: -15px;
-  width: 100%;
-  height: 55px;
+  inline-size: 100%;
+  block-size: 55px;
  background-color: var(--primary-color-hover);
  border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
 }

 .upperSuperChatMessage .channelThumbnail {
-  width: 45px;
+  inline-size: 45px;
  margin-inline-start: 10px;
  margin-block-start: 5px;
 }
@ -166,12 +166,12 @@
 }

 .liveChatComments {
-  width: 100%;
+  inline-size: 100%;
  overflow-y: auto;
 }

 .channelThumbnail {
-  width: 25px;
+  inline-size: 25px;
  border-radius: 200px;
  -webkit-border-radius: 200px;
 }
@ -204,13 +204,13 @@
 }

 .badgeImage {
-  width: 14px;
+  inline-size: 14px;
 }

 .scrollToBottom {
  background-color: var(--accent-color);
-  width: 35px;
-  height: 35px;
+  inline-size: 35px;
+  block-size: 35px;
  position: absolute;
  inset-inline-start: 45%;
  inset-block-end: 20px;
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
@ -118,7 +118,7 @@
      <div
        ref="liveChatComments"
        class="liveChatComments"
-        :style="{ height: chatHeight }"
+        :style="{ blockSize: chatHeight }"
        @mousewheel="e => onScroll(e)"
      >
        <div
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@ -36,8 +36,8 @@
 }

 .playlistIcon {
-  height: 20px;
-  width: 20px;
+  block-size: 20px;
+  inline-size: 20px;
  font-size: 20px;
  padding: 10px;
  margin-block-start: -25px;
@ -59,7 +59,7 @@

 .playlistItems {
  overflow-y: auto;
-  height: 360px;
+  block-size: 360px;
 }

 .playlistItem {
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@ -96,12 +96,12 @@ $watched-transition-duration: 0.5s;

    .thumbnailImage {
      @include is-sidebar-item {
-        height: 75px;
+        block-size: 75px;
      }

      @include is-recommendation {
-        height: auto;
-        width: 163px;
+        block-size: auto;
+        inline-size: 163px;
      }
    }

@ -153,13 +153,13 @@ $watched-transition-duration: 0.5s;
      justify-self: end;
      margin-inline-end: 3px;
      margin-block-start: 3px;
-      height: fit-content;
+      block-size: fit-content;
    }

    .watchedProgressBar {
      align-self: flex-end;
      background-color: var(--primary-color);
-      height: 2px;
+      block-size: 2px;
      justify-self: stretch;
      z-index: 2;
    }
@ -169,7 +169,7 @@ $watched-transition-duration: 0.5s;
      display: grid;
      font-size: 20px;
      justify-self: end;
-      width: 60px;
+      inline-size: 60px;

      .background {
        background-color: var(--bg-color);
@ -193,7 +193,7 @@ $watched-transition-duration: 0.5s;

    .channelImage {
      border-radius: 50%;
-      height: 130px;
+      block-size: 130px;
    }
  }

@ -253,7 +253,7 @@ $watched-transition-duration: 0.5s;

      font-size: 14px;
      grid-area: description;
-      max-height: 50px;
+      max-block-size: 50px;
      overflow-y: hidden;
    }
  }
@ -274,14 +274,14 @@ $watched-transition-duration: 0.5s;
    }

    .channelThumbnail {
-      width: 231px;
+      inline-size: 231px;
    }
  }

  &.grid {
    display: flex;
    flex-direction: column;
-    min-height: 230px;
+    min-block-size: 230px;
    padding-block-end: 20px;

    .videoThumbnail,
@ -289,7 +289,7 @@ $watched-transition-duration: 0.5s;
      margin-block-end: 12px;

      .thumbnailImage {
-        width: 100%;
+        inline-size: 100%;
      }
    }

--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@ -1031,7 +1031,7 @@ html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] {

 body {
  margin: 0;
-  min-height: 100vh;
+  min-block-size: 100vh;
  color: var(--primary-text-color);
  background-color: var(--bg-color);
  --red-500: #f44336;
@ -1055,8 +1055,8 @@ a:visited {
 }

 ::-webkit-scrollbar {
-	width: 6px;
-  height: 6px;
+	inline-size: 6px;
+  block-size: 6px;
 }

 ::-webkit-scrollbar-thumb {
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@ -1,10 +1,10 @@
 .card {
  margin-block: 0 60px;
  margin-inline: auto;
-  width: 85%;
+  inline-size: 85%;

  @media only screen and (max-width: 680px) {
-    width: 90%;
+    inline-size: 90%;
  }
 }

@ -13,8 +13,8 @@
 }

 .logo {
-  max-width: 100%;
-  width: 500px;
+  max-inline-size: 100%;
+  inline-size: 500px;
 }

 .version {
@ -28,7 +28,7 @@
  grid-template-columns: 1fr 1fr;
  margin-block: 80;
  margin-inline: auto;
-  max-width: 860px;
+  max-inline-size: 860px;

  @media only screen and (max-width: 650px) {
    grid-template-columns: 1fr;
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@ -1,6 +1,6 @@
 .card {
  position: relative;
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 20px;
  margin-inline: auto;
  box-sizing: border-box;
@ -8,15 +8,15 @@

 .channelDetails {
  padding: 0;
-  max-width: 92vw;
+  max-inline-size: 92vw;
 }

 .channelBannerContainer {
  background: center / cover no-repeat var(--banner-url, transparent);
-  height: 13vw;
-  min-height: 110px;
-  max-height: 32vh;
-  width: 100%;
+  block-size: 13vw;
+  min-block-size: 110px;
+  max-block-size: 32vh;
+  inline-size: 100%;
 }

 .channelBannerContainer.default {
@ -37,7 +37,7 @@
 .channelInfo {
  display: flex;
  flex-flow: row wrap;
-  width: 100%;
+  inline-size: 100%;
  justify-content: space-between;
 }

@ -46,8 +46,8 @@
 }

 .channelThumbnail {
-  width: 100px;
-  height: 100px;
+  inline-size: 100px;
+  block-size: 100px;
  border-radius: 200px;
  -webkit-border-radius: 200px;
  object-fit: cover;
@ -55,7 +55,7 @@

 .channelName {
  font-weight: bold;
-  width: 100%;
+  inline-size: 100%;
  font-size: 25px;
 }

@ -76,7 +76,7 @@
 }

 .channelSearch {
-  width: 220px;
+  inline-size: 220px;
  margin-inline-start: auto;
  align-self: flex-end;
  flex: 1 1 0%;
@ -88,8 +88,8 @@

 .channelInfoTabs {
  position: relative;
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
  justify-content: unset;
  gap: 32px;
  padding-block: .3em;
@ -127,7 +127,7 @@

 .channelSearch {
  margin-block-start: 10px;
-  max-width: 250px;
+  max-inline-size: 250px;
 }

 .elementListLoading {
@ -140,8 +140,8 @@

 .getNextPage {
  background-color: var(--search-bar-color);
-  width: 100%;
-  height: 45px;
+  inline-size: 100%;
+  block-size: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
@ -168,8 +168,8 @@
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-border-radius: 200px;
  border-radius: 200px;
-  height: 12%;
-  width: 12%;
+  block-size: 12%;
+  inline-size: 12%;
 }

 .ft-community-image {
@ -185,13 +185,13 @@

@media only screen and (max-width: 800px) {
  .channelInfoTabs {
-    height: auto;
+    block-size: auto;
    flex-flow: column-reverse;
  }

  .channelSearch {
-    width: 100%;
-    max-width: none;
+    inline-size: 100%;
+    max-inline-size: none;
  }

  .tabs {
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@ -1,7 +1,7 @@
 .getNextPage {
  background-color: var(--search-bar-color);
-  width: 100%;
-  height: 45px;
+  inline-size: 100%;
+  block-size: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
@ -16,11 +16,11 @@
 .card {
  margin-block: 0 20px;
  margin-inline: auto;
-  width: 85%;
+  inline-size: 85%;
 }

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -10,6 +10,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@ -5,13 +5,13 @@
 .playlistInfo {
  background-color: var(--card-bg-color);
  box-sizing: border-box;
-  height: calc(100vh - 132px);
+  block-size: calc(100vh - 132px);
  margin-inline-end: 1em;
  overflow-y: auto;
  padding: 10px;
  position: sticky;
  inset-block-start: 96px;
-  width: 30%;
+  inline-size: 30%;
 }

 .playlistItems {
@ -20,7 +20,7 @@
  grid-gap: 10px;
  margin: 0;
  padding: 10px;
-  width: 60%;
+  inline-size: 60%;
 }

 .playlistItem {
@ -36,7 +36,7 @@

 .loadNextPageWrapper {
  /* about the same height as the button */
-  max-height: 7vh;
+  max-block-size: 7vh;
 }

 :deep(.videoThumbnail) {
@ -45,7 +45,7 @@
 }

 :deep(.thumbnailImage) {
-  max-width: 25vw;
+  max-inline-size: 25vw;
 }

@media only screen and (max-width: 850px) {
@ -57,16 +57,16 @@
    box-sizing: border-box;
    position: relative;
    inset-block-start: 0;
-    height: auto;
-    width: 100%;
+    block-size: auto;
+    inline-size: 100%;
  }

  .playlistItems {
    box-sizing: border-box;
-    width: 100%;
+    inline-size: 100%;
  }

  :deep(.thumbnailImage) {
-    max-width: 35vw;
+    max-inline-size: 35vw;
  }
 }
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -18,6 +18,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -9,13 +9,13 @@
 }

 .profileList {
-  max-width: 1000px;
+  max-inline-size: 1000px;
  margin-block: 0 10px;
  margin-inline: auto;
 }

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@ -1,7 +1,7 @@
 .getNextPage {
  background-color: var(--search-bar-color);
-  width: 100%;
-  height: 45px;
+  inline-size: 100%;
+  block-size: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
@ -14,13 +14,13 @@
 }

 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@ -1,6 +1,6 @@
 hr {
-  height: 2px;
-  width: 85%;
+  block-size: 2px;
+  inline-size: 85%;
  margin-block: 0;
  margin-inline: auto;
  border: 0;
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -13,7 +13,7 @@
 }

 .channels {
-  width: 100%;
+  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
  gap: 2.5rem;
@ -35,7 +35,7 @@
 }

 .channelThumbnail {
-  height: 120px;
+  block-size: 120px;
  border-radius: 50%;
 }

@ -48,7 +48,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
-  width: 100%;
+  inline-size: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
@ -63,12 +63,12 @@
 }

 .unsubscribeContainer .btn {
-  height: 80%;
+  block-size: 80%;
 }

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }

  .channels {
@ -76,6 +76,6 @@
  }

  .channelThumbnail {
-    height: 80px;
+    block-size: 80px;
  }
 }
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -9,7 +9,7 @@
 }

 .subscriptionTabs {
-  width: 100%;
+  inline-size: 100%;
  margin-block-start: -3px;
  color: var(--tertiary-text-color);
  margin-block-end: 10px;
@ -37,6 +37,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -11,7 +11,7 @@
 }

 .trendingInfoTabs {
-  width: 100%;
+  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-block-start: -3px;
@ -47,6 +47,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@ -1,5 +1,5 @@
 .card {
-  width: 85%;
+  inline-size: 85%;
  margin-block: 0 60px;
  margin-inline: auto;
 }
@ -10,6 +10,6 @@

@media only screen and (max-width: 680px) {
  .card {
-    width: 90%;
+    inline-size: 90%;
  }
 }
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@ -14,10 +14,10 @@
  @include single-column-template;

  display: inline-block;
-  max-width: calc(80vh * 1.78);
+  max-inline-size: calc(80vh * 1.78);

  @media only screen and (min-width: 901px) {
-    width: 300%;
+    inline-size: 300%;
  }
 }

@ -42,12 +42,13 @@

    .videoPlayer {
      grid-column: 1;
-      margin: 0 auto;
-      max-width: calc(80vh * 1.78);
+      margin-block: 0;
+      margin-inline: auto;
+      max-inline-size: calc(80vh * 1.78);
      position: relative;

      .upcomingThumbnail {
-        width: 100%;
+        inline-size: 100%;
      }

      .premiereDate {
@ -57,7 +58,7 @@
        inset-block-end: 12px;
        color: #fff;
        display: flex;
-        height: 60px;
+        block-size: 60px;
        inset-inline-start: 12px;
        padding-block: 0;
        padding-inline: 12px;
@ -73,7 +74,7 @@
        .premiereText {
          margin-block: 0;
          margin-inline: 12px;
-          min-width: 200px;
+          min-inline-size: 200px;

          .premiereTextTimestamp {
            font-size: 0.85em;
@ -99,7 +100,7 @@
    grid-area: sidebar;

    @media only screen and (min-width: 901px) {
-      min-width: 380px;
+      min-inline-size: 380px;
    }

    @at-root .noSidebar#{&} {
@ -116,7 +117,7 @@

  .watchVideoSidebar,
  .watchVideoPlaylist {
-    height: 500px;
+    block-size: 500px;
  }

  .watchVideoPlaylist {
@ -125,7 +126,7 @@
      margin-block-end: auto;
    }
    @media (max-width: 768px) {
-      height: auto;
+      block-size: auto;
    }
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -7874,6 +7874,11 @@ stylelint-scss@^4.4.0:
    postcss-selector-parser "^6.0.11"
    postcss-value-parser "^4.2.0"

+stylelint-use-logical-spec@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz#5903e38ea37cb4277ea4f7d29e9a997772afab5f"
+  integrity sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==
+
 stylelint@^15.10.3:
  version "15.10.3"
  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.3.tgz#995e4512fdad450fb83e13f3472001f6edb6469c"