From a118cd79235caf6b33a666cedae3376e53105eab Mon Sep 17 00:00:00 2001
From: Benedikt Meurer <bmeurer@chromium.org>
Date: Fri, 5 Jan 2024 10:58:41 +0100
Subject: [PATCH] [application] Fix text coming out of popup when deleting a
 database.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When we try to delete a DB in indexedDB inside storage section in
application in inspect element, the confirm dialog box and its text
was popping out of screen when we drag the inspect element to right
increasing the page view.

Updated some CSS in `confirmDialog.css` file to fix the issue.

Fixed: chromium:1514335
Change-Id: Id90a911d845b993a2e8fc17aa13a32fd270c501e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5163750
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
---
 AUTHORS                               |  1 +
 front_end/ui/legacy/confirmDialog.css | 25 ++++++++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/AUTHORS b/AUTHORS
index 89ee5192a8..a9e7412e37 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -55,6 +55,7 @@ Michael Rienstra <mrienstra@gmail.com>
 Muhammad Mahad <mahadtxt@gmail.com>
 Naoto Ono <onoto1998@gmail.com>
 Paul Fisher <paul@pfish.zone>
+Paras Awasthi <awasthiparas6@gmail.com>
 Per-Olov Jernberg <possan@possan.se>
 PhistucK <phistuck@gmail.com>
 Pradhuman Singh Baid <pradhumansinghbaid@gmail.com>
diff --git a/front_end/ui/legacy/confirmDialog.css b/front_end/ui/legacy/confirmDialog.css
index 84ae609ead..6f04f4779f 100644
--- a/front_end/ui/legacy/confirmDialog.css
+++ b/front_end/ui/legacy/confirmDialog.css
@@ -6,8 +6,12 @@
 
 .widget {
   padding: 20px;
+  box-sizing: border-box;
+  max-width: 400px;
+  overflow: hidden;
 }
 
+/* Center-align text in the message class */
 .message {
   text-align: center;
 }
@@ -16,18 +20,33 @@
 .button {
   font-size: larger;
   white-space: pre;
-  margin: 5px;
+  margin: 10px 0;
 }
 
+/* Center-align text and added margin to the button class */
 .button {
   text-align: center;
-  margin-top: 10px;
+  margin-top: 20px;
 }
 
+/* Ensure the button has a minimum width */
 .button button {
-  min-width: 80px;
+  min-width: 100px; /* Increased minimum width for better appearance */
 }
 
 .reason {
   color: var(--sys-color-error);
+  margin-top: 10px; /* Added top margin for better spacing */
+}
+
+/* Added white-space property to handle text overflow */
+.message span {
+  white-space: normal;
+  word-wrap: break-word; /* Allow long words to break and wrap to the next line */
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px;
+  margin: 0;
 }