improve style

packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx

@@ -162,7 +162,6 @@ export default (props) => {
     }
 
     return <div className="streamingControlPanel">
-        <div className="streamingControlPanel_header">
         <div className="streamingControlPanel_header_thumbnail">
             <img
                 src={
@@ -170,6 +169,26 @@ export default (props) => {
                 }
             />
         </div>
+        <div className="streamingControlPanel_header">
+            <div className="streamingControlPanel_header_actions">
+                <ProfileSelector
+                    profiles={R_Profiles}
+                    value={selectedProfileId}
+                    loading={L_Profiles}
+                    onCreateProfile={handleCreateProfile}
+                    onChangeProfile={(profileID) => {
+                        setSelectedProfileId(profileID)
+                    }}
+                />
+
+                <antd.Button
+                    type="primary"
+                    icon={<Icons.Edit2 />}
+                    onClick={onClickEditInfo}
+                >
+                    Edit profile
+                </antd.Button>
+            </div>
 
             <div className="streamingControlPanel_header_details">
                 <div className="streamingControlPanel_header_details_status">
@@ -208,42 +227,24 @@ export default (props) => {
                     <CategoryViewResolver category={profileData?.info.category} />
                 </div>
             </div>
-
-            <div className="streamingControlPanel_header_actions">
-                <ProfileSelector
-                    profiles={R_Profiles}
-                    value={selectedProfileId}
-                    loading={L_Profiles}
-                    onCreateProfile={handleCreateProfile}
-                    onChangeProfile={(profileID) => {
-                        setSelectedProfileId(profileID)
-                    }}
-                />
-
-                <antd.Button
-                    type="primary"
-                    icon={<Icons.Edit2 />}
-                    onClick={onClickEditInfo}
-                >
-                    Edit profile
-                </antd.Button>
-            </div>
         </div>
 
-        <div className="config">
+        <div className="streaming_configs">
             <LimitAlert
                 limit_id="streaming_bandwidth"
             />
 
-            <div className="panel">
+            <div className="streaming_configs_panel">
                 <h2><Icons.MdSettingsInputAntenna /> Emission</h2>
 
                 <div className="content">
                     <span>Ingestion URL</span>
 
-                    <code>
+                    <div className="inline_field">
+                        <span>
                             {profileData?.addresses?.ingest ?? "No ingest URL available"}
-                    </code>
+                        </span>
+                    </div>
                 </div>
 
                 <div className="content">
@@ -265,7 +266,7 @@ export default (props) => {
                 </div>
             </div>
 
-            <div className="panel">
+            <div className="streaming_configs_panel">
                 <h2><Icons.Tool />Additional options</h2>
 
                 <div className="content">
@@ -291,35 +292,41 @@ export default (props) => {
                 </div>
             </div>
 
-            <div className="panel">
+            <div className="streaming_configs_panel">
                 <h2><Icons.Link /> URL Information</h2>
 
                 <div className="content">
                     <span>AAC URL (Only Audio)</span>
 
-                    <code>
+                    <div className="inline_field">
+                        <span>
                             {profileData?.addresses?.aac ?? "No AAC URL available"}
-                    </code>
+                        </span>
+                    </div>
                 </div>
 
                 <div className="content">
                     <span>HLS URL</span>
 
-                    <code>
+                    <div className="inline_field">
+                        <span>
                             {profileData?.addresses?.hls ?? "No HLS URL available"}
-                    </code>
+                        </span>
+                    </div>
                 </div>
 
                 <div className="content">
                     <span>FLV URL</span>
 
-                    <code>
+                    <div className="inline_field">
+                        <span>
                             {profileData?.addresses?.flv ?? "No FLV URL available"}
-                    </code>
+                        </span>
+                    </div>
                 </div>
             </div>
 
-            <div className="panel">
+            <div className="streaming_configs_panel">
                 <h2><Icons.Activity /> Statistics</h2>
 
                 <div className="content">

packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less

@@ -2,11 +2,59 @@
     display: flex;
     flex-direction: column;
 
-    width: 100%;
-
     transition: all 0.3s ease-in-out;
 
+    // width: 100%;
+    // max-width: 100%;
+
+    overflow: hidden;
+
+    gap: 20px;
+
+    .inline_field {
+        background-color: var(--background-color-accent);
+
+        font-size: 1rem;
+
+        width: 100%;
+
+        font-family: "DM Mono", monospace;
+
+        overflow: hidden;
+
+        span {
+            user-select: all;
+
+            width: 100%;
+
+            word-wrap: break-all;
+        }
+    }
+
+    .streamingControlPanel_header_thumbnail {
+        align-self: center;
+        justify-self: center;
+
+        border-radius: 12px;
+
+        width: 100%;
+        height: 300px;
+
+        background-color: black;
+
+        img {
+            height: 100%;
+            width: 100%;
+
+            object-fit: contain;
+
+            border-radius: 12px;
+        }
+    }
+
     .streamingControlPanel_header {
+        position: relative;
+
         display: flex;
         flex-direction: row;
 
@@ -17,37 +65,17 @@
         border: 1px solid var(--border-color);
         border-radius: 12px;
 
-        margin-bottom: 20px;
+        gap: 20px;
 
         transition: all 0.3s ease-in-out;
 
-        .streamingControlPanel_header_thumbnail {
-            align-self: center;
-            justify-self: center;
-
-            border-radius: 12px;
-
-            height: 100%;
-            width: 100%;
-
-            img {
-                height: 15vh;
-                width: 20vw;
-
-                object-fit: cover;
-
-                border-radius: 12px;
-            }
-
-            margin-right: 40px;
-        }
-
         .streamingControlPanel_header_details {
             display: inline-flex;
             flex-direction: column;
 
+            width: fit-content;
+
             padding: 20px 0;
-            width: 100%;
 
             .streamingControlPanel_header_details_status {
                 margin-bottom: 20px;
@@ -58,7 +86,9 @@
 
         .streamingControlPanel_header_actions {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
+
+            max-width: 200px;
 
             justify-items: center;
 
@@ -66,36 +96,24 @@
 
             .ant-select {
                 height: fit-content;
-                min-width: 300px;
+                width: 100%;
             }
         }
     }
 
-    .config {
+    .streaming_configs {
         display: flex;
         flex-direction: column;
 
-        padding: 0 40px;
+        width: 100%;
 
         transition: all 0.3s ease-in-out;
 
         gap: 20px;
 
-        code {
+        overflow: hidden;
-            padding: 5px 8px;
-            font-size: 1rem;
 
-            background-color: var(--background-color-accent);
+        .streaming_configs_panel {
-            color: var(--text-color);
-
-            border-radius: 8px;
-
-            font-family: "DM Mono", monospace;
-
-            user-select: all;
-        }
-
-        .panel {
             display: flex;
             flex-direction: column;
 
@@ -108,6 +126,13 @@
             }
 
             .content {
+                display: flex;
+                flex-direction: column;
+
+                padding: 10px 20px;
+
+                width: 100%;
+
                 .title {
                     display: inline-flex;
                     flex-direction: row;
@@ -116,13 +141,6 @@
 
                     width: 100%;
                 }
-
-                display: flex;
-                flex-direction: column;
-
-                margin: 10px 20px;
-
-                width: 100%;
             }
         }
     }