From 9d3e984bb77ed47dcae1468f9f1642a103708b57 Mon Sep 17 00:00:00 2001
From: Timmy Willison <timmywil@users.noreply.github.com>
Date: Fri, 7 Jul 2023 10:53:06 -0400
Subject: [PATCH] releases.jquery.com: make the SRI modal responsive

- the SRI modal now resizes with the window
---
 themes/jquery/css/sri-modal.css | 18 ++++++++++++------
 themes/jquery/js/sri-modal.js   |  1 -
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/themes/jquery/css/sri-modal.css b/themes/jquery/css/sri-modal.css
index 25da19a3..8f3231d6 100644
--- a/themes/jquery/css/sri-modal.css
+++ b/themes/jquery/css/sri-modal.css
@@ -2,10 +2,16 @@
  * Added for SRI Modal
  */
 .sri-modal {
-	padding: 0;
+	padding: 20px;
 	border: none;
 	background: #fff;
 	border-radius: 0;
+
+	/* Resize with window */
+	width: calc(100% - 40px) !important;
+	max-width: 830px;
+	left: 50% !important;
+	transform: translateX(-50%);
 }
 
 .sri-modal .ui-dialog-titlebar {
@@ -17,7 +23,6 @@
 }
 
 .sri-modal .ui-dialog-title {
-	padding-top: 20px;
 	text-align: center;
 	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 	font-weight: 400;
@@ -43,23 +48,23 @@
 }
 
 .sri-modal-link {
-	width: 810px;
+	width: 100%;
 	word-wrap: break-word;
 	word-break: break-all;
 	display: inline-block;
 	background-color: #f8fbfb;
-	padding: 0 10px;
+	/* Leave room for button */
+	padding: 10px 45px 10px 10px;
 	position: relative;
 }
 
 .sri-modal-link code {
-	width: 765px;
 	display: inline-block;
 	white-space: pre-line;
 	background-color: transparent;
-	padding: 0;
 	font-size: 13px;
 	line-height: 16px;
+	padding: 0;
 }
 
 .sri-modal-copy-btn {
@@ -71,6 +76,7 @@
 	cursor: pointer;
 	position: absolute;
 	top: 5px;
+	right: 0;
 }
 
 .sri-modal-copy-btn > i {
diff --git a/themes/jquery/js/sri-modal.js b/themes/jquery/js/sri-modal.js
index 2d2b1735..7330db6c 100644
--- a/themes/jquery/js/sri-modal.js
+++ b/themes/jquery/js/sri-modal.js
@@ -14,7 +14,6 @@ $( function() {
 		} ) ).removeAttr( "id" ).appendTo( "body" ).dialog( {
 			modal: true,
 			resizable: false,
-			width: 830,
 			dialogClass: "sri-modal",
 			draggable: false,
 			close: function() {