From a06ffa8f795fcce90a53fa9706edf51f5c2da855 Mon Sep 17 00:00:00 2001
From: Cesar Mendivil <mendivilrubioc@gmail.com>
Date: Thu, 6 Nov 2025 11:38:40 -0700
Subject: [PATCH] =?UTF-8?q?feat(modal):=20mejorar=20el=20estilo=20del=20mo?=
 =?UTF-8?q?dal=20y=20ajustar=20la=20posici=C3=B3n=20del=20bot=C3=B3n=20de?=
 =?UTF-8?q?=20retroceso?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewTransmissionModal.module.css           | 13 ++++++++--
 .../src/components/NewTransmissionModal.tsx   | 24 ++++++++++---------
 shared/components/Modal.module.css            |  1 -
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/broadcast-panel/src/components/NewTransmissionModal.module.css b/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
index 53a85d7..dc90a1a 100644
--- a/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
+++ b/packages/broadcast-panel/src/components/NewTransmissionModal.module.css
@@ -1,8 +1,17 @@
 /* NewTransmissionModal - StreamYard style */
 
+.modalWrapper {
+  position: relative;
+}
+
+.modalWrapper.hasBackButton :global(.modalHeader) {
+  padding-left: 56px;
+}
+
 .backButton {
   position: absolute;
-  top: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   left: 16px;
   display: flex;
   align-items: center;
@@ -15,7 +24,7 @@
   color: #5f6368;
   cursor: pointer;
   transition: all 0.15s;
-  z-index: 1;
+  z-index: 10;
 }
 
 .backButton:hover {
diff --git a/packages/broadcast-panel/src/components/NewTransmissionModal.tsx b/packages/broadcast-panel/src/components/NewTransmissionModal.tsx
index 612818c..1bda404 100644
--- a/packages/broadcast-panel/src/components/NewTransmissionModal.tsx
+++ b/packages/broadcast-panel/src/components/NewTransmissionModal.tsx
@@ -211,17 +211,18 @@ const NewTransmissionModal: React.FC<Props> = ({ open, onClose, onCreate, onUpda
   const showBackButton = view === 'add-destination'
 
   return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      title={modalTitle}
-      width="md"
-    >
-      {showBackButton && (
-        <button onClick={handleBackToMain} className={styles.backButton}>
-          <MdArrowBack size={20} />
-        </button>
-      )}
+    <div className={`${styles.modalWrapper} ${showBackButton ? styles.hasBackButton : ''}`}>
+      <Modal
+        open={open}
+        onClose={onClose}
+        title={modalTitle}
+        width="md"
+      >
+        {showBackButton && (
+          <button onClick={handleBackToMain} className={styles.backButton}>
+            <MdArrowBack size={20} />
+          </button>
+        )}
 
       {view === 'main' && (
         <>
@@ -474,6 +475,7 @@ const NewTransmissionModal: React.FC<Props> = ({ open, onClose, onCreate, onUpda
         </div>
       )}
     </Modal>
+    </div>
   )
 }
 
diff --git a/shared/components/Modal.module.css b/shared/components/Modal.module.css
index 07ff808..52278b1 100644
--- a/shared/components/Modal.module.css
+++ b/shared/components/Modal.module.css
@@ -39,7 +39,6 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 24px;
-  border-bottom: 1px solid #e8eaed;
 }
 
 .modalTitle {