Admin: Reskin - Welcome Panel viewport fixes.

Ensure that the black background covers the entire width of the header on large screens, ensure that the dismiss button appears on small screens.

Props peterwilsoncc, ramonopoly, huzaifaalmesbah, marc4, shailu25, ocean90, krokodok, karinchristen, hubersen, stefanvelthuys, joedolson.
Fixes #64741.

git-svn-id: https://develop.svn.wordpress.org/trunk@61798 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-admin/css/dashboard.css

@@ -141,8 +141,6 @@
 	position: relative;
 	overflow: auto;
 	margin: 16px 0;
-	background-color: #c3c4c7;
-	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 8px;
 	font-size: 14px;
 	line-height: 1.3;
@@ -266,6 +264,10 @@
 	justify-content: space-between;
 }
 
+.welcome-panel-header-wrap {
+	background-color: #151515;
+}
+
 .welcome-panel-header {
 	box-sizing: border-box;
 	margin-left: auto;
@@ -286,6 +288,9 @@
 	gap: 32px;
 	align-self: flex-end;
 	background: #ffffff;
+	border: 1px solid #c3c4c7;
+	border-top: 0;
+	border-radius: 0 0 8px 8px;
 }
 
 [class*="welcome-panel-icon"] {
@@ -1424,6 +1429,7 @@ a.rsswidget {
 	}
 
 	.welcome-panel .welcome-panel-close::before {
+		position: absolute;
 		top: 5px;
 		left: -35px;
 	}

src/wp-admin/includes/dashboard.php

@@ -2075,19 +2075,21 @@ function wp_welcome_panel() {
 	$is_block_theme          = wp_is_block_theme();
 	?>
 	<div class="welcome-panel-content">
-	<div class="welcome-panel-header">
-		<div class="welcome-panel-header-image">
-			<?php echo file_get_contents( dirname( __DIR__ ) . '/images/dashboard-background.svg' ); ?>
+	<div class="welcome-panel-header-wrap">
+		<div class="welcome-panel-header">
+			<div class="welcome-panel-header-image">
+				<?php echo file_get_contents( dirname( __DIR__ ) . '/images/dashboard-background.svg' ); ?>
+			</div>
+			<h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
+			<p>
+				<a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
+				<?php
+					/* translators: %s: Current WordPress version. */
+					printf( __( 'Learn more about the %s version.' ), esc_html( $display_version ) );
+				?>
+				</a>
+			</p>
 		</div>
-		<h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
-		<p>
-			<a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
-			<?php
-				/* translators: %s: Current WordPress version. */
-				printf( __( 'Learn more about the %s version.' ), esc_html( $display_version ) );
-			?>
-			</a>
-		</p>
 	</div>
 	<div class="welcome-panel-column-container">
 		<div class="welcome-panel-column">