From 31f3563f2d7ad81645c94acd69810823d363c869 Mon Sep 17 00:00:00 2001
From: Martin Brennan <mjrbrennan@gmail.com>
Date: Tue, 2 Mar 2021 16:55:41 +1000
Subject: [PATCH] FIX: CSS tweaks so bookmark + timer modal work on mobile
 (#12253)

Previously the timer modal was too wide and the bookmark modal too narrow.
---
 .../common/base/edit-topic-timer-modal.scss       |  9 +++++++++
 .../common/components/bookmark-modal.scss         |  1 +
 app/assets/stylesheets/mobile/topic.scss          | 15 ---------------
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
index db8fe642f44..47c9a68bfb4 100644
--- a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
@@ -7,9 +7,18 @@
     border-top: 0;
     padding: 10px 0;
   }
+  .modal-inner-container {
+    box-sizing: border-box;
+    min-width: 310px;
+  }
   .modal-body {
     max-height: none;
     width: 375px;
+    box-sizing: border-box;
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
 
     .control-label {
       font-weight: 700;
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index b2908e23873..f97c37a6c28 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -1,6 +1,7 @@
 .bookmark-with-reminder.modal {
   .modal-inner-container {
     box-sizing: border-box;
+    min-width: 310px;
   }
   .modal-body {
     width: 375px;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 5ceff97f02f..5ab50a8a6d9 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -204,21 +204,6 @@ sub sub {
   }
 }
 
-.edit-topic-timer-modal {
-  .future-date-input {
-    .alert-info {
-      margin: 0 -10px -10px -10px;
-      padding: 10px;
-    }
-  }
-  .btn.pull-right {
-    margin-right: 0;
-  }
-  .modal-body {
-    width: 375px;
-  }
-}
-
 .topic-footer-main-buttons {
   display: flex;
   align-items: center;