From 0f4529750907656b19a2bcc020d683ddeee1ca1e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 6 Jan 2025 11:25:32 +0530
Subject: [PATCH] refactor: remove unnecessary padding from lib component
 picker

Library component picker and Problem bank picker iframe had unnecessary
padding resulting in multiple border/shadow in the modal.
---
 .../views/components/add_library_content.js   |  1 +
 .../views/modals/select_v2_library_content.js |  1 +
 cms/static/sass/views/_container.scss         |  3 ++
 cms/templates/js/basic-modal.underscore       | 28 ++++++++++---------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/cms/static/js/views/components/add_library_content.js b/cms/static/js/views/components/add_library_content.js
index 278717ba9212..1459ed3e0145 100644
--- a/cms/static/js/views/components/add_library_content.js
+++ b/cms/static/js/views/components/add_library_content.js
@@ -22,6 +22,7 @@ function($, _, gettext, BaseModal) {
             // Translators: "title" is the name of the current component being edited.
             titleFormat: gettext('Add library content'),
             addPrimaryActionButton: false,
+            showEditorModeButtons: false,
         }),
 
         initialize: function() {
diff --git a/cms/static/js/views/modals/select_v2_library_content.js b/cms/static/js/views/modals/select_v2_library_content.js
index e301aeab8d9d..79b13015c845 100644
--- a/cms/static/js/views/modals/select_v2_library_content.js
+++ b/cms/static/js/views/modals/select_v2_library_content.js
@@ -17,6 +17,7 @@ function($, _, gettext, BaseModal) {
             viewSpecificClasses: 'modal-add-component-picker confirm',
             titleFormat: gettext('Add library content'),
             addPrimaryActionButton: false,
+            showEditorModeButtons: false,
         }),
 
         events: {
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index 9737782e8305..ee48e71deb74 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -585,13 +585,16 @@
 // cms/static/js/views/components/add_library_content_with_picker.js
 .modal-add-component-picker {
   top: 10%;
+  padding: 0px !important;
   .modal-content {
     padding: 0 !important;
+    border-radius: ($baseline/5);
 
     & > iframe {
       width: 100%;
       min-height: 80vh;
       background: url('#{$static-path}/images/spinner.gif') center center no-repeat;
+      border-radius: ($baseline/5);
     }
   }
 }
diff --git a/cms/templates/js/basic-modal.underscore b/cms/templates/js/basic-modal.underscore
index 4273fe4f9956..8f4d4a32bbb9 100644
--- a/cms/templates/js/basic-modal.underscore
+++ b/cms/templates/js/basic-modal.underscore
@@ -4,20 +4,22 @@
     <div class="modal-window-overlay"></div>
     <div class="modal-window <%- viewSpecificClasses %> modal-<%- size %> modal-type-<%- type %>" tabindex="-1" aria-labelledby="modal-window-title">
         <div class="<%- name %>-modal">
-            <div class="modal-header">
-                <h2 id="modal-window-title" class="title modal-window-title">
-                    <%- title %>
-                    <% if (modalSRTitle) { %>
-                        <span class="sr modal-sr-title">
-                            <%- modalSRTitle %>
-                        </span>
+            <% if (title || modalSRTitle || showEditorModeButtons) { %>
+                <div class="modal-header">
+                    <h2 id="modal-window-title" class="title modal-window-title">
+                        <%- title %>
+                        <% if (modalSRTitle) { %>
+                            <span class="sr modal-sr-title">
+                                <%- modalSRTitle %>
+                            </span>
+                        <% } %>
+                    </h2>
+                    <% if (showEditorModeButtons) { %>
+                        <ul class="editor-modes action-list action-modes">
+                        </ul>
                     <% } %>
-                </h2>
-                <% if (showEditorModeButtons) { %>
-                    <ul class="editor-modes action-list action-modes">
-                    </ul>
-                <% } %>
-            </div>
+                </div>
+            <% } %>
             <div class="modal-content">
             </div>
             <div class="modal-actions">