Fix :focus styles for What's New

The :focus styles for titles and images in What's new were a little odd.
Making the elements block level allow the box-shadow to wrap around the
elements as expected

* additional aesthetic cleanup

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/322325
https://gitlab.com/gitlab-org/growth/engineering/-/issues/5434

app/assets/javascripts/whats_new/components/app.vue

@@ -63,7 +63,7 @@ export default {
     <gl-drawer
       ref="drawer"
       v-gl-resize-observer="handleResize"
-      class="whats-new-drawer"
+      class="whats-new-drawer gl-reset-line-height"
       :z-index="700"
       :open="open"
       @close="closeDrawer"

app/assets/javascripts/whats_new/components/feature.vue

@@ -34,10 +34,11 @@ export default {
 </script>
 
 <template>
-  <div class="gl-py-6 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
+  <div class="gl-py-6 gl-px-6 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
     <gl-link
       :href="feature.url"
       target="_blank"
+      class="gl-display-block"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
@@ -52,12 +53,12 @@ export default {
     <gl-link
       :href="feature.url"
       target="_blank"
-      class="whats-new-item-title-link"
+      class="whats-new-item-title-link gl-display-block gl-mt-4 gl-mb-1"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
-      <h5 class="gl-font-lg gl-mb-1" data-test-id="feature-title">{{ feature.title }}</h5>
+      <h5 class="gl-font-lg gl-my-0" data-test-id="feature-title">{{ feature.title }}</h5>
     </gl-link>
     <div v-if="releaseDate" class="gl-mb-3" data-testid="release-date">{{ releaseDate }}</div>
     <div v-if="feature.packages" class="gl-mb-3">

app/assets/stylesheets/components/whats_new.scss

@@ -2,6 +2,7 @@
   margin-top: $header-height;
   @include gl-shadow-none;
   overflow-y: hidden;
+  width: 500px;
 
   .gl-infinite-scroll-legend {
     @include gl-display-none;

changelogs/unreleased/jswain_whats_new_focus.yml

+---
+title: Fix :focus styles for What's New
+merge_request: 61398
+author:
+type: changed