💄 Style modal

RedHatProductSecurity · Sep 9, 2024 · cacdd1e · cacdd1e
1 parent c11d0c7
commit cacdd1e
Showing 1 changed file with 33 additions and 17 deletions.
diff --git a/src/components/FlawAffects/FlawAffects.vue b/src/components/FlawAffects/FlawAffects.vue
@@ -584,34 +584,50 @@ const displayedTrackers = computed(() => {
       :allTrackersCount="allTrackers.length"
     />
   </div>
-  <Modal :show="isManageTrackersModalOpen" style="max-width: 75%;" @close="closeManagersTrackersModal">
-    <template #header>
-      <div class="d-flex w-100">
-        <h4 class="m-0">Tracker Manager</h4>
+  <div class="osim-tracker-manager-modal-container">
+    <Modal :show="isManageTrackersModalOpen" style="max-width: 75%;" @close="closeManagersTrackersModal">
+      <template #body>
         <button
           type="button"
           class="btn btn-close ms-auto"
           aria-label="Close"
           @click="closeManagersTrackersModal"
         />
-      </div>
-    </template>
-    <template #body>
-      <TrackerManager
-        :relatedFlaws="relatedFlaws"
-        :flaw="flaw"
-        @affects-trackers:refresh="refreshAffects"
-      />
-    </template>
-    <template #footer>
-      <div></div>
-    </template>
-  </Modal>
+        <TrackerManager
+          :relatedFlaws="relatedFlaws"
+          :flaw="flaw"
+          @affects-trackers:refresh="refreshAffects"
+        />
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <style scoped lang="scss">
 @import '@/scss/bootstrap-overrides';
 
+.osim-tracker-manager-modal-container {
+  &:deep(.modal-header),
+  &:deep(.modal-footer) {
+    display: none;
+  }
+
+  &:deep(.modal-body) {
+    position: relative;
+    padding: 0;
+
+    .osim-affect-trackers-container {
+      margin: 0 !important;
+    }
+  }
+
+  :deep(.btn-close) {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+}
+
 .osim-affects-section {
   margin-block: 1rem;