From 16f2c4195bc812a7f1b0470e74da5aa6503bcf1a Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 11 Jun 2024 08:44:30 +0000
Subject: [PATCH] activity: Move `.container` CSS from bootstrap to
 activity.css.

* `.container` class is only used in `/activity/support` and
  `/activity/remote/support` pages. It is also used in emails but
  it has its own CSS.

* Since the CSS applied is localized and looks good, we just
  move the CSS relevant to us to `activity.css` which is used
  by both of these pages.

* Searched `"container"`, ` container `, `"container ` and
  ` container"` to look for the uses of this class.
---
 web/styles/portico/activity.css               | 18 +++++++++++++
 web/third/bootstrap/css/bootstrap.portico.css | 25 -------------------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/web/styles/portico/activity.css b/web/styles/portico/activity.css
index 506aa0d283..f32612b10b 100644
--- a/web/styles/portico/activity.css
+++ b/web/styles/portico/activity.css
@@ -512,3 +512,21 @@ tr.admin td:first-child {
         margin-top: 5px;
     }
 }
+
+.container {
+    width: 940px;
+    margin-right: auto;
+    margin-left: auto;
+
+    @media (width <= 767px) {
+        width: auto;
+    }
+
+    @media (767px < width <= 979px) {
+        width: 724px;
+    }
+
+    @media (width >= 1180px) {
+        width: 1170px;
+    }
+}
diff --git a/web/third/bootstrap/css/bootstrap.portico.css b/web/third/bootstrap/css/bootstrap.portico.css
index de6091d2bf..becf1884b2 100644
--- a/web/third/bootstrap/css/bootstrap.portico.css
+++ b/web/third/bootstrap/css/bootstrap.portico.css
@@ -79,22 +79,6 @@ a:focus {
   color: #005580;
   text-decoration: underline;
 }
-.container {
-  width: 940px;
-}
-.container {
-  margin-right: auto;
-  margin-left: auto;
-}
-.container:before,
-.container:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.container:after {
-  clear: both;
-}
 p {
   margin: 0 0 10px;
 }
@@ -290,9 +274,6 @@ input:focus:invalid:focus {
     padding-left: 20px;
     padding-right: 20px;
   }
-  .container {
-    width: auto;
-  }
   .row {
     margin-left: 0;
   }
@@ -310,9 +291,6 @@ input:focus:invalid:focus {
   .row:after {
     clear: both;
   }
-  .container {
-    width: 724px;
-  }
   input {
     margin-left: 0;
   }
@@ -330,9 +308,6 @@ input:focus:invalid:focus {
   .row:after {
     clear: both;
   }
-  .container {
-    width: 1170px;
-  }
   input {
     margin-left: 0;
   }