From 2eceda44b6f3527530c486b4a36606b9598a36d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 15 Aug 2018 20:46:16 +0100
Subject: [PATCH] fix(ui): try to fix silence duration layout on small screens

---
 .../SilenceModal/DateTimeSelect/Duration.js   | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/Duration.js b/ui/src/Components/SilenceModal/DateTimeSelect/Duration.js
index 5208b79aa..c98c57e7c 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/Duration.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/Duration.js
@@ -20,44 +20,46 @@ const Duration = observer(
       const { value, label, onInc, onDec } = this.props;
 
       return (
-        <table>
-          <tbody>
-            <tr>
-              <td className="text-center">
-                <span onClick={onInc}>
-                  <FontAwesomeIcon
-                    icon={faAngleUp}
-                    size="2x"
-                    className="text-muted cursor-pointer"
-                  />
-                </span>
-              </td>
-              <td width="50%" />
-            </tr>
-            <tr>
-              <td className="text-center">
-                <h2>{value}</h2>
-              </td>
-              <td width="50%">
-                {label ? (
-                  <span className="text-muted ml-2">{label}</span>
-                ) : null}
-              </td>
-            </tr>
-            <tr>
-              <td className="text-center">
-                <span onClick={onDec}>
-                  <FontAwesomeIcon
-                    icon={faAngleDown}
-                    size="2x"
-                    className="text-muted cursor-pointer"
-                  />
-                </span>
-              </td>
-              <td width="50%" />
-            </tr>
-          </tbody>
-        </table>
+        <div>
+          <table className="w-100">
+            <tbody>
+              <tr>
+                <td className="w-50 text-center">
+                  <span onClick={onInc}>
+                    <FontAwesomeIcon
+                      icon={faAngleUp}
+                      size="2x"
+                      className="text-muted cursor-pointer"
+                    />
+                  </span>
+                </td>
+                <td className="w-50" />
+              </tr>
+              <tr>
+                <td className="w-50 text-center">
+                  <h2>{value}</h2>
+                </td>
+                <td className="w-50">
+                  {label ? (
+                    <span className="text-muted ml-2">{label}</span>
+                  ) : null}
+                </td>
+              </tr>
+              <tr>
+                <td className="w-50 text-center">
+                  <span onClick={onDec}>
+                    <FontAwesomeIcon
+                      icon={faAngleDown}
+                      size="2x"
+                      className="text-muted cursor-pointer"
+                    />
+                  </span>
+                </td>
+                <td className="w-50" />
+              </tr>
+            </tbody>
+          </table>
+        </div>
       );
     }
   }