FIX: allow styling of feedback on mobile (#25072)

(to test try using discourse-ai which displays feedback on mobile)


---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

app/assets/stylesheets/common.scss

@@ -20,3 +20,4 @@
 @import "common/float-kit/_index";
 @import "common/login/_index";
 @import "common/table-builder/_index";
+@import "common/post-action-feedback";

app/assets/stylesheets/common/post-action-feedback.scss

@@ -1,44 +1,10 @@
-@keyframes slide {
-  0% {
-  }
-  100% {
-    transform: translateY(100%) translateX(-50%);
-    opacity: 0;
-  }
-}
-
-.post-action-feedback-alert {
-  position: absolute;
-  top: -1.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  color: var(--success);
-  padding: 0.25rem 0.5rem;
-  white-space: nowrap;
-  font-size: var(--font-down-2);
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-  z-index: z("modal", "popover");
-  &.-success {
-    color: var(--success);
-  }
-
-  &.-fail {
-    color: var(--danger);
-  }
-
-  &.slide-out {
-    animation: slide 1s cubic-bezier(0, 0, 0, 2) forwards;
-  }
-}
-
 @keyframes draw {
   to {
     stroke-dashoffset: 0;
   }
 }
 
-.post-menu-area {
+.post-controls {
   .post-action-feedback-button {
     position: relative;
     height: 100%;

app/assets/stylesheets/desktop/_index.scss

@@ -12,7 +12,7 @@
 @import "modal";
 @import "topic-list";
 @import "topic-post";
-@import "post-action-menu";
+@import "post-action-feedback";
 @import "topic";
 @import "upload";
 @import "user";

app/assets/stylesheets/desktop/post-action-feedback.scss

@@ -0,0 +1,24 @@
+.post-action-feedback-alert {
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--success);
+  padding: 0.25rem 0.5rem;
+  white-space: nowrap;
+  font-size: var(--font-down-2);
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  z-index: z("modal", "popover");
+  &.-success {
+    color: var(--success);
+  }
+
+  &.-fail {
+    color: var(--danger);
+  }
+
+  &.slide-out {
+    animation: slide 1s cubic-bezier(0, 0, 0, 2) forwards;
+  }
+}

app/assets/stylesheets/mobile/_index.scss

@@ -23,6 +23,7 @@
 @import "modal-overrides";
 @import "new-user";
 @import "personal-message";
+@import "post-action-feedback";
 @import "push-notifications-mobile";
 @import "reviewables";
 @import "search";

app/assets/stylesheets/mobile/post-action-feedback.scss

@@ -0,0 +1,40 @@
+@keyframes d-toast-opening {
+  from {
+    transform: translateY(var(--transform-y, 10px));
+  }
+}
+
+.post-action-feedback-alert {
+  --transform-y: 0;
+
+  position: fixed;
+  top: calc(var(--header-offset) + 0.5rem);
+  left: 0;
+  right: 0;
+  margin-inline: 0.5rem;
+  z-index: z("max");
+  display: flex;
+  box-sizing: border-box;
+  padding: 1em 1.5em;
+  opacity: 1;
+  transition: opacity 0.5s;
+  border-radius: var(--d-border-radius);
+  color: var(--primary);
+  overflow: hidden;
+  background-color: var(--tertiary-very-low);
+  border: 1px solid var(--primary-low);
+  box-shadow: var(--shadow-menu-panel);
+  overflow-wrap: break-word;
+  animation: d-toast-opening 0.3s ease-in-out;
+  will-change: transform;
+
+  &.-fade-out {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .post-action-feedback-alert {
+    --transform-y: 2vh;
+  }
+}