diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index 469f308a4..d770453b7 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -323,12 +323,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
             </div>
           </div>
           <div class=\\"flex-shrink-0 flex-grow-0\\">
-            <div class=\\"d-flex flex-column justify-content-between align-items-center\\">
+            <div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"chevron-up\\"
-                   class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
+                   class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 448 512\\"
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index f770bea89..4de3ded95 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -52,7 +52,7 @@ const SilenceComment = ({
           </div>
         </div>
         <div className="flex-shrink-0 flex-grow-0">
-          <div className="d-flex flex-column justify-content-between align-items-center">
+          <div className="d-flex flex-column flex-sm-row justify-content-between">
             <FilteringCounterBadge
               alertStore={alertStore}
               name="@silence_id"
@@ -63,7 +63,7 @@ const SilenceComment = ({
             />
             <FontAwesomeIcon
               icon={collapsed ? faChevronUp : faChevronDown}
-              className="mt-2 mr-1 text-muted cursor-pointer"
+              className="my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer"
               onClick={collapseToggle}
             />
           </div>
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index 73f452e2d..fd4ce35df 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -36,7 +36,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
     </div>
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <div class=\\"d-flex flex-column justify-content-between align-items-center\\">
+    <div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
       <div class
            style=\\"display: inline-block; max-width: 100%;\\"
            data-tooltipped
@@ -53,7 +53,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"chevron-up\\"
-           class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
+           class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 448 512\\"
@@ -99,7 +99,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
     </div>
   </div>
   <div class=\\"flex-shrink-0 flex-grow-0\\">
-    <div class=\\"d-flex flex-column justify-content-between align-items-center\\">
+    <div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
       <div class
            style=\\"display: inline-block; max-width: 100%;\\"
            data-tooltipped
@@ -116,7 +116,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"chevron-down\\"
-           class=\\"svg-inline--fa fa-chevron-down fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
+           class=\\"svg-inline--fa fa-chevron-down fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 448 512\\"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 9c1c752d8..d1921f6a1 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -48,7 +48,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
         </div>
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0\\">
-        <div class=\\"d-flex flex-column justify-content-between align-items-center\\">
+        <div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
           <div class
                style=\\"display: inline-block; max-width: 100%;\\"
                data-tooltipped
@@ -65,7 +65,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"chevron-up\\"
-               class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
+               class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 448 512\\"
@@ -115,7 +115,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
         </div>
       </div>
       <div class=\\"flex-shrink-0 flex-grow-0\\">
-        <div class=\\"d-flex flex-column justify-content-between align-items-center\\">
+        <div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
           <div class
                style=\\"display: inline-block; max-width: 100%;\\"
                data-tooltipped
@@ -132,7 +132,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
+               class=\\"svg-inline--fa fa-chevron-down fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 448 512\\"