From 2b41113211f24c46e42269cb9641c64808f4dfa6 Mon Sep 17 00:00:00 2001
From: Dhanu Saputra <35093673+dhanusaputra@users.noreply.github.com>
Date: Wed, 22 Mar 2023 03:06:16 +0700
Subject: [PATCH] Loose div in Utilities > Stream health screen (#2844)

---
 web/components/admin/StreamHealthOverview.tsx | 98 ++++++++++---------
 web/pages/admin/stream-health.tsx             |  4 +-
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/web/components/admin/StreamHealthOverview.tsx b/web/components/admin/StreamHealthOverview.tsx
index 8855e437d..6df992bed 100644
--- a/web/components/admin/StreamHealthOverview.tsx
+++ b/web/components/admin/StreamHealthOverview.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
+import { Alert, Button, Card, Col, Row, Statistic, Typography } from 'antd';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import React, { FC, useContext } from 'react';
@@ -41,54 +41,56 @@ export const StreamHealthOverview: FC<StreamHealthOverviewProps> = ({ showTroubl
 
   return (
     <div>
-      <Row gutter={8}>
-        <Col span={12}>
-          <Statistic
-            title="Healthy Stream"
-            value={healthy ? 'Yes' : 'No'}
-            valueStyle={{ color }}
-            prefix={healthy ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
-          />
-        </Col>
-        <Col span={12}>
-          <Statistic
-            title="Playback Health"
-            value={healthPercentage}
-            valueStyle={{ color }}
-            suffix="%"
-          />
-        </Col>
-      </Row>
-      <Row style={{ display: representation < 100 && representation !== 0 ? 'grid' : 'none' }}>
-        <Typography.Text
-          type="secondary"
-          style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }}
+      <Card type="inner">
+        <Row gutter={8}>
+          <Col span={12}>
+            <Statistic
+              title="Healthy Stream"
+              value={healthy ? 'Yes' : 'No'}
+              valueStyle={{ color }}
+              prefix={healthy ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
+            />
+          </Col>
+          <Col span={12}>
+            <Statistic
+              title="Playback Health"
+              value={healthPercentage}
+              valueStyle={{ color }}
+              suffix="%"
+            />
+          </Col>
+        </Row>
+        <Row style={{ display: representation < 100 && representation !== 0 ? 'grid' : 'none' }}>
+          <Typography.Text
+            type="secondary"
+            style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }}
+          >
+            Stream health represents {representation}% of all known players. Other player status is
+            unknown.
+          </Typography.Text>
+        </Row>
+        <Row
+          gutter={16}
+          style={{ width: '100%', display: message ? 'grid' : 'none', marginTop: '10px' }}
         >
-          Stream health represents {representation}% of all known players. Other player status is
-          unknown.
-        </Typography.Text>
-      </Row>
-      <Row
-        gutter={16}
-        style={{ width: '100%', display: message ? 'grid' : 'none', marginTop: '10px' }}
-      >
-        <Col span={24}>
-          <Alert
-            message={message}
-            type={icon}
-            showIcon
-            action={
-              showTroubleshootButton && (
-                <Link passHref href="/stream-health">
-                  <Button size="small" type="text" style={{ color: 'black' }}>
-                    TROUBLESHOOT
-                  </Button>
-                </Link>
-              )
-            }
-          />
-        </Col>
-      </Row>
+          <Col span={24}>
+            <Alert
+              message={message}
+              type={icon}
+              showIcon
+              action={
+                showTroubleshootButton && (
+                  <Link passHref href="/stream-health">
+                    <Button size="small" type="text" style={{ color: 'black' }}>
+                      TROUBLESHOOT
+                    </Button>
+                  </Link>
+                )
+              }
+            />
+          </Col>
+        </Row>
+      </Card>
     </div>
   );
 };
diff --git a/web/pages/admin/stream-health.tsx b/web/pages/admin/stream-health.tsx
index e406e9491..b860611e8 100644
--- a/web/pages/admin/stream-health.tsx
+++ b/web/pages/admin/stream-health.tsx
@@ -279,9 +279,7 @@ const StreamHealth = () => {
       <Space direction="vertical" size="middle">
         <Row justify="space-around">
           <Col style={{ width: '100%' }}>
-            <Card type="inner">
-              <StreamHealthOverview showTroubleshootButton={false} />
-            </Card>
+            <StreamHealthOverview showTroubleshootButton={false} />
           </Col>
         </Row>
         <Row