Merge branch '482681-remove-tab-width-X' into 'master'

Move CSS Classes `tab-width-X` from `utilities.scss` to `app/assets/stylesheets/framework/layout.scss`

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/170689



Merged-by: Peter Hegman <phegman@gitlab.com>
Approved-by: Peter Hegman <phegman@gitlab.com>
Co-authored-by: Sujal Gupta <sujalgupta6100@gmail.com>

app/assets/stylesheets/framework/layout.scss

@@ -169,3 +169,18 @@ html {
     padding-right: 0;
   }
 }
+
+
+/*
+ * These are used by the `Tab width` user preference in
+ * `https://gitlab.com/-/profile/preferences`. The `css_class_for_user` method in 
+ * `lib/gitlab/tab_width.rb` is used to add one of these classes to the `body` element.
+*/
+
+@for $i from 1 through 12 {
+  #{'.tab-width-#{$i}'} {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -moz-tab-size: $i;
+    tab-size: $i;
+  }
+}

app/assets/stylesheets/utilities.scss

@@ -40,14 +40,6 @@ $type-scale: (
   }
 }
 
-@for $i from 1 through 12 {
-  #{'.tab-width-#{$i}'} {
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -moz-tab-size: $i;
-    tab-size: $i;
-  }
-}
-
 // stylelint-disable-next-line gitlab/no-gl-class
 .gl-top-app-header {
   top: $calc-application-header-height;