Move CSS and add notice to avoid adding more

- Add notice asking to avoid adding more CSS to the pipelines file
- Moving a few styles that were left over.

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -482,3 +482,27 @@
     @include build-trace();
   }
 }
+
+.progress-bar.bg-primary {
+  background-color: $blue-500 !important;
+}
+
+.pipeline-stage-pill {
+  width: 10rem;
+}
+
+.pipeline-job-pill {
+  width: 8rem;
+}
+
+.stage-rounded {
+  border-radius: 2rem;
+}
+
+.stage-left-rounded {
+  border-radius: 2rem 0 0 2rem;
+}
+
+.stage-right-rounded {
+  border-radius: 0 2rem 2rem 0;
+}

app/assets/stylesheets/page_bundles/pipelines.scss

@@ -5,6 +5,10 @@
  * Pipelines Bundle: Pipeline lists and Mini Pipelines
  */
 
+.pipelines-container .top-area .nav-controls > .btn:last-child {
+  float: none;
+}
+
 // Pipelines list
 // Should affect pipelines table components rendered by:
 // - app/assets/javascripts/commit/pipelines/pipelines_bundle.js

app/assets/stylesheets/pages/builds.scss

@@ -347,3 +347,20 @@
     }
   }
 }
+
+@include media-breakpoint-down(md) {
+  .content-list {
+    &.builds-content-list {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+}
+
+[data-page='admin:jobs:index'] {
+  .admin-builds-table {
+    td:last-child {
+      min-width: 120px;
+    }
+  }
+}

app/assets/stylesheets/pages/pipelines.scss

-@include media-breakpoint-down(md) {
-  .content-list {
-    &.builds-content-list {
-      width: 100%;
-      overflow: auto;
-    }
-  }
-}
+/**
+ * !! NOTE: Do not add more code in this file:
+ *
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/267602
+ *
+ * For new pipeline CSS please consider:
+ *
+ * For pipelines tables and lists:
+ * - `app/assets/stylesheets/page_bundles/pipelines.scss`
+ *
+ * For individual pipelines and mini-pipelines:
+ * - `app/assets/stylesheets/page_bundles/pipeline.scss`
+ *
+**/
 
 .ci-table {
   .avatar {
@@ -80,39 +86,3 @@
     color: $gl-text-color;
   }
 }
-
-[data-page='admin:jobs:index'] {
-  .admin-builds-table {
-    td:last-child {
-      min-width: 120px;
-    }
-  }
-}
-
-.pipelines-container .top-area .nav-controls > .btn:last-child {
-  float: none;
-}
-
-.progress-bar.bg-primary {
-  background-color: $blue-500 !important;
-}
-
-.pipeline-stage-pill {
-  width: 10rem;
-}
-
-.pipeline-job-pill {
-  width: 8rem;
-}
-
-.stage-rounded {
-  border-radius: 2rem;
-}
-
-.stage-left-rounded {
-  border-radius: 2rem 0 0 2rem;
-}
-
-.stage-right-rounded {
-  border-radius: 0 2rem 2rem 0;
-}