add responsive styling

discourse · Nov 7, 2024 · 556cf71 · 556cf71
1 parent b6be2ee
commit 556cf71
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
@@ -4,6 +4,7 @@ $show-interested: inherit;
 .discourse-post-event {
   display: flex;
   max-width: 35rem;
+  justify-content: center;
 
   .event__section {
     padding: 0.5em 1em;
@@ -33,7 +34,7 @@ $show-interested: inherit;
     margin: 5px 0;
     flex-direction: column;
     flex: 1 0 auto;
-    max-width: 100%;
+    max-width: calc(100% - 2px - 6px);
     box-sizing: border-box;
     border-radius: var(--d-button-border-radius);
 
@@ -203,11 +204,12 @@ $show-interested: inherit;
     justify-content: space-between;
     align-items: center;
     padding: 0.5em 1em;
+    flex-wrap: wrap;
     border-top: 1px solid var(--primary-low);
 
     &.event-status {
       margin: 0;
-      column-gap: 0.5em;
+      gap: 0.5em;
       .btn {
         flex: 1;
       }
@@ -224,6 +226,9 @@ $show-interested: inherit;
       &.status-not_going .not-going-button .d-icon {
         color: var(--danger);
       }
+      .not-going-button span {
+        white-space: nowrap;
+      }
     }
   }
 

diff --git a/assets/stylesheets/mobile/discourse-post-event.scss b/assets/stylesheets/mobile/discourse-post-event.scss
@@ -3,12 +3,6 @@
     border-width: 1px;
   }
 
-  .event-header,
-  .event-actions,
-  .event-dates {
-    padding: 0 0.3em;
-  }
-
   .event-dates {
     .date {
       max-width: 75vw;