responsive edits

jordanvidrine · jordanvidrine · commit d33e52249ed8 · 2025-05-21T14:30:48.000-05:00
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
@@ -152,6 +152,7 @@
 .title-wrapper {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
 
   .topic-statuses {
     line-height: 1.2;
@@ -186,25 +187,32 @@
       }
     }
 
-    &.can-edit-topic .fancy-title {
-      outline: 2px solid transparent;
-      border-radius: var(--d-border-radius);
-      transition: outline ease-in-out 0.2s;
-      padding: 0.25rem;
-      transition-delay: 0.1s;
-    }
+    @include viewport.from(md) {
+      &.can-edit-topic .fancy-title {
+        outline: 2px solid transparent;
+        border-radius: var(--d-border-radius);
+        transition: outline ease-in-out 0.2s;
+        padding: 0.25rem;
+        transition-delay: 0.1s;
+      }
 
-    &.can-edit-topic:not(.editing-topic) {
-      cursor: pointer;
-    }
+      &.can-edit-topic:not(.editing-topic) {
+        cursor: pointer;
+      }
 
-    &.can-edit-topic:not(.editing-topic, .title-highlighted):hover
-      .fancy-title {
-      outline: 2px solid var(--primary-300);
+      &.can-edit-topic:not(.editing-topic, .title-highlighted):hover
+        .fancy-title {
+        outline: 2px solid var(--primary-300);
+      }
+
+      &.editing-topic {
+        transition: none;
+      }
     }
 
-    &.editing-topic {
-      transition: none;
+    &.can-edit-topic .title-wrapper .d-icon {
+      margin-left: 0.5rem;
+      font-size: var(--font-down-2);
     }
   }
 
@@ -221,10 +229,6 @@
     }
   }
 
-  &.can-edit-topic .d-icon {
-    font-size: 0.8em;
-  }
-
   .edit-topic-title {
     display: flex;
     flex-wrap: wrap;
