Refresh Authorize Application page UI

[JeffPaul]

The Authorize Application screen that you get popped into when approving an Application Password via a logged in account has some UI deficiencies for particularly long links and primary and secondary buttons that are stacked with varying formatted text between them. This feels like a good opportunity for a UI improvement to make this experience a bit less visually complex and cognitively confusing for users.

[JeffPaul]

screenshot of a sample screen with overflowing URL text and stacked action buttons

[denstyll]

Authorize Application fixed

[denstyll]

Hey Jeff,

Looks like this has already been resolved. I've attached the image confirming.

[pratiklondhe]

UI still seems to be breaking for long strings, tested on the latest trunk branch pull

[pratiklondhe]

A better user experience might be to display a popup showing the URL, informing the user that they will be redirected after approval/rejection, and asking for confirmation.

[pratiklondhe]

Small change to fix the long strings going out of the card div

[gsalo]

evidence of word wrap working fine

[gsalo]

Here's how to test go the link ​http://localhost:8889/wp-admin/authorize-application.php?app_name={add app name}

[uxknight]

Hi, here are two ideas to clean up the UI a bit: ​https://www.figma.com/proto/FmgSZmoKbGx0xgxOpHOeLQ/OSS-Working-Board?page-id=0%3A1&node-id=32-342&node-type=frame&viewport=-4661%2C1489%2C0.55&t=L9Duylwt2ewde7IY-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=32%3A342

cc @JeffPaul

Scenarios Observed:

Text Does Not Overflow:

When the application name (app_name parameter) contains paragraphs or spaces between words, the text is wrapped appropriately within the card area.
Example URL:

​http://localhost:8889/wp-admin/authorize-application.php?app_name=Contrary+to+popular+belief%2C+Lorem+Ipsum+is+not+simply+random+text.+It+has+roots+in+a+piece+of+classical+Latin+literature+from+45+BC%2C+making+it+over+2000+years+old.+Richard+McClintock%2C+a+Latin+professor+at+Hampden-Sydney+College+in+Virginia%2C+looked+up+one+of+the+more+obscure+Latin+words%2C+consectetur%2C+from+a+Lorem+Ipsum+passage%2C+and+going+through+the+cites+of+the+word+in+classical+literature%2C+discovered+the+undoubtable+source.

Screenshot: [Attached above showing proper wrapping.]

Text Overflows:

When the application name (app_name parameter) contains continuous text without any spaces or breaks, the text exceeds the boundaries of the card area and breaks the layout.
Example URL:

​http://localhost:8889/wp-admin/authorize-application.php?app_name=asdflaksdklfjakldjfklajdfklasdkfjaklsdjjajknmmakalsjdkfjklajsdklfjaksdjfkasdjfkjsdfkaskdlfjaklsjdfklasjdfklajsdfkljakljsdklfjkljklajsdklfjklajsdfkljaklsdjfakljdfklajdfklasjdfklajsdfkljasdklfjaskldfjaslkdfjaskldjflaksjdfklasdjflkasjdflkajsdfasdkljfaklsjdfasjdfkaljsdfkladsf

Screenshot: ​https://prnt.sc/VxFBi60ZcnxC

​https://prnt.sc/sc3mGyEpd05U
​https://prnt.sc/tc2Y1rLFsm6R

Trac ticket: https://core.trac.wordpress.org/ticket/62064

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

Hi @tushar-addweb,
Thank you for the PR!
It seems the files might have been auto-formatted by your editor during saving. Could you please double-check this?

Trying to test the patch via the Playground link but playground errors out with this:

[09-Jul-2025 21:38:37 UTC] JavaScript Error: PHP.run() failed with exit code 255 and the following output: PHP Warning: ZipArchive::getStatusString(): Invalid or uninitialized Zip object in /internal/eval.php on line 23
PHP Fatal error: Uncaught Exception: Could not unzip file: in /internal/eval.php:23
Stack trace:
#0 /internal/eval.php(26): unzip('/tmp/file.zip', '/tmp/unzipped-w...', true)
#1 {main}

thrown in /internal/eval.php on line 23

<br />
<b>Warning</b>: ZipArchive::getStatusString(): Invalid or uninitialized Zip object in <b>/internal/eval.php</b> on line <b>23</b><br />
<br />
<b>Fatal error</b>: Uncaught Exception: Could not unzip file: in /internal/eval.php:23
Stack trace:
#0 /internal/eval.php(26): unzip('/tmp/file.zip', '/tmp/unzipped-w...', true)
#1 {main}

thrown in <b>/internal/eval.php</b> on line <b>23</b><br />

Error: PHP.run() failed with exit code 255 and the following output: PHP Warning: ZipArchive::getStatusString(): Invalid or uninitialized Zip object in /internal/eval.php on line 23
PHP Fatal error: Uncaught Exception: Could not unzip file: in /internal/eval.php:23
Stack trace:
#0 /internal/eval.php(26): unzip('/tmp/file.zip', '/tmp/unzipped-w...', true)
#1 {main}

thrown in /internal/eval.php on line 23

<br />
<b>Warning</b>: ZipArchive::getStatusString(): Invalid or uninitialized Zip object in <b>/internal/eval.php</b> on line <b>23</b><br />
<br />
<b>Fatal error</b>: Uncaught Exception: Could not unzip file: in /internal/eval.php:23
Stack trace:
#0 /internal/eval.php(26): unzip('/tmp/file.zip', '/tmp/unzipped-w...', true)
#1 {main}

thrown in <b>/internal/eval.php</b> on line <b>23</b><br />

at PHP.run (​https://playground.wordpress.net/worker-thread-DAGie4cn.js:53:904)
at async unzipFile (​https://playground.wordpress.net/worker-thread-DAGie4cn.js:96:1245)
at async unzipWordPress (​https://playground.wordpress.net/worker-thread-DAGie4cn.js:816:76)
at async bootWordPress (​https://playground.wordpress.net/worker-thread-DAGie4cn.js:476:558)
at async PlaygroundWorkerEndpoint.boot (​https://playground.wordpress.net/worker-thread-DAGie4cn.js:1699:3322)

[rogermedia]

@tushar-addweb The patch seems to be causing an error in Playground when trying to test. Can you please have a look?