reset系CSSを削除し、Tailwindのresetを使うようにした

app/assets/stylesheets/application/blocks/page-content/_page-content-header-actions.css

@@ -3,14 +3,6 @@
   padding-top: .25rem;
   display: flex;
   flex-wrap: wrap;
-  @media (min-width: 40em) {
-    justify-content: space-between;
-    gap: .5rem;
-  }
-  @media (max-width: 35.9375em) {
-    justify-content: center;
-    gap: .25rem;
-  }
 }
 
 @media (min-width: 40em) {
@@ -20,10 +12,11 @@
   }
 }
 
-.page-content-header-actions {
-  padding-top: .25rem;
-  display: flex;
-  flex-wrap: wrap;
+@media (max-width: 39.9375em) {
+  .page-content-header-actions {
+    justify-content: center;
+    gap: .25rem;
+  }
 }
 
 .page-content-header-actions__start {
@@ -36,42 +29,53 @@
 }
 
 @media (min-width: 40em) {
-  .page-content-header-actions__start, .page-content-header-actions__end {
-    flex: 1 1;
+  .page-content-header-actions__start,
+  .page-content-header-actions__end {
+    flex: 1;
     gap: .5rem;
   }
 }
 
 .page-content-header-actions__end {
   display: flex;
-  @media (min-width: 40em) {
+}
+
+@media (min-width: 40em) {
+  .page-content-header-actions__end {
     flex: 1;
     gap: .5rem;
+    justify-content: flex-end;
   }
-  @media (max-width: 35.9375em) {
+}
+
+@media (max-width: 39.9375em) {
+  .page-content-header-actions__start,
+  .page-content-header-actions__end {
     gap: .25rem;
   }
 }
+
 .page-content-header-actions__start {
   justify-content: flex-start;
 
 }
-.page-content-header-actions__end {
-  @media (min-width: 40em) {
-    justify-content: flex-end;
 
-  }
-}
 .page-content-header-actions__action {
   min-width: 5.4rem;
-  @media (min-width: 48em) {
+}
+
+.page-content-header-actions__action  .a-button {
+  padding-inline: 0;
+}
+
+@media (min-width: 48em) {
+  .page-content-header-actions__action {
     min-width: 7rem;
   }
-  @media (max-width: 47.9375em) {
-    width: 50%;
-  }
-  .a-button {
-    padding-inline: 0;
+}
 
+@media (max-width: 47.9375em) {
+  .page-content-header-actions__action {
+  width: 50%;
   }
 }

app/assets/stylesheets/atoms/_a-side-nav.css

@@ -1,8 +1,5 @@
 .a-side-nav {
   background-color: var(--base);
-  border: solid 1px var(--border);
-  border-radius: 0.25rem;
-  margin-top: 1rem;
 }
 
 @media (min-width: 64em) {
@@ -17,6 +14,15 @@
   }
 }
 
+@media (max-width: 63.9375em) {
+  .a-side-nav {
+    margin-top: 1rem;
+    margin-inline: 1rem;
+    border-radius: 0.25rem;
+    border: solid 1px var(--border);
+  }
+}
+
 .a-side-nav__inner {
   display: flex;
   flex-direction: column;

app/assets/stylesheets/common-imports.css

@@ -1,6 +1,4 @@
 @import "./config/variables/_css-variables.css";
-@import "./initializers/_ress.css";
-@import "./initializers/_reset.css";
 @import "./config/variables/_fonts.css";
 @import "./config/variables/_welcome-colors.css";
 @import "./config/variables/_choices.css";