From 8aaf6018f1f5463abab6476b068d7ac4864316e5 Mon Sep 17 00:00:00 2001
From: Jeff Daley <jeffdaley@users.noreply.github.com>
Date: Mon, 1 Apr 2024 16:58:03 -0400
Subject: [PATCH] Improve focus styles on Doc::TileMedium (#663)

* Improve focus styles on Doc::TileMedium

* Empty-Commit
---
 web/app/components/dashboard/index.hbs                         | 2 +-
 web/app/components/doc/tile-medium.hbs                         | 3 ++-
 web/app/components/document/sidebar.hbs                        | 1 +
 .../document/sidebar/related-resources/list-item.hbs           | 2 +-
 web/app/components/overflow-menu.hbs                           | 2 +-
 web/app/components/overflow-menu.ts                            | 1 +
 web/app/components/project/index.hbs                           | 2 +-
 web/app/components/project/jira-widget.hbs                     | 1 +
 8 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/components/dashboard/index.hbs b/web/app/components/dashboard/index.hbs
index dc393c277..03ccdad6f 100644
--- a/web/app/components/dashboard/index.hbs
+++ b/web/app/components/dashboard/index.hbs
@@ -7,7 +7,7 @@
 
 <div class="flex w-full flex-col-reverse gap-5 lg:flex-row lg:gap-0">
   {{! Main }}
-  <div class="min-h-[500px] w-full overflow-hidden pb-20">
+  <div class="min-h-[500px] w-full pb-20">
     <div class="main pr-4">
       {{#if @docsAwaitingReview}}
         <Dashboard::DocsAwaitingReview @docs={{@docsAwaitingReview}} />
diff --git a/web/app/components/doc/tile-medium.hbs b/web/app/components/doc/tile-medium.hbs
index edfc6d51d..3dab213f6 100644
--- a/web/app/components/doc/tile-medium.hbs
+++ b/web/app/components/doc/tile-medium.hbs
@@ -35,11 +35,12 @@
             @route="authenticated.document"
             @query={{hash draft=this.docIsDraft}}
             @model={{this.docID}}
+            class="group/primary-link"
           >
             {{! Primary click area }}
             <div
               aria-hidden="true"
-              class="absolute -top-px left-0 -bottom-px w-full mix-blend-multiply group-focus-within:bg-color-page-faint group-focus-within:outline group-focus-within:outline-2 group-focus-within:outline-color-border-strong group-hover:bg-color-page-faint"
+              class="absolute -top-px left-0 -bottom-px w-full mix-blend-multiply group-hover:bg-color-page-faint group-focus/primary-link:outline group-focus/primary-link:outline-2 group-focus/primary-link:outline-color-border-strong"
             ></div>
 
             <h3 class="relative">
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
index d947b46a4..5d4733f90 100644
--- a/web/app/components/document/sidebar.hbs
+++ b/web/app/components/document/sidebar.hbs
@@ -351,6 +351,7 @@
                   </LinkTo>
 
                   <OverflowMenu
+                    @renderOut={{true}}
                     @items={{hash
                       remove=(hash
                         icon="trash"
diff --git a/web/app/components/document/sidebar/related-resources/list-item.hbs b/web/app/components/document/sidebar/related-resources/list-item.hbs
index 5a02c2059..2c2ecb813 100644
--- a/web/app/components/document/sidebar/related-resources/list-item.hbs
+++ b/web/app/components/document/sidebar/related-resources/list-item.hbs
@@ -30,7 +30,7 @@
       </ExternalLink>
     {{/if}}
     {{#unless @editingIsDisabled}}
-      <OverflowMenu @items={{this.overflowMenuItems}} />
+      <OverflowMenu @items={{this.overflowMenuItems}} @renderOut={{true}} />
     {{/unless}}
   </div>
 </li>
diff --git a/web/app/components/overflow-menu.hbs b/web/app/components/overflow-menu.hbs
index cb2abd45d..99f92e54b 100644
--- a/web/app/components/overflow-menu.hbs
+++ b/web/app/components/overflow-menu.hbs
@@ -1,6 +1,6 @@
 <X::DropdownList
   @items={{@items}}
-  @renderOut={{true}}
+  @renderOut={{@renderOut}}
   @placement="bottom-end"
   data-test-overflow-menu
   ...attributes
diff --git a/web/app/components/overflow-menu.ts b/web/app/components/overflow-menu.ts
index baa1c5e2b..e98c2ea60 100644
--- a/web/app/components/overflow-menu.ts
+++ b/web/app/components/overflow-menu.ts
@@ -13,6 +13,7 @@ interface OverflowMenuComponentSignature {
     items: Record<string, OverflowItem>;
     offset?: OffsetOptions;
     isShown?: boolean;
+    renderOut?: boolean;
   };
 }
 
diff --git a/web/app/components/project/index.hbs b/web/app/components/project/index.hbs
index 2b01cacda..ce4ffcf10 100644
--- a/web/app/components/project/index.hbs
+++ b/web/app/components/project/index.hbs
@@ -189,7 +189,7 @@
         We add a page background color to overlay any
         removed documents that are still animating out.
        }}
-      <div class="relative z-10 bg-color-page-primary pt-8">
+      <div class="relative z-10 mt-1 bg-color-page-primary pt-7">
         {{! External links }}
         <Project::ResourceList
           data-test-external-link-list
diff --git a/web/app/components/project/jira-widget.hbs b/web/app/components/project/jira-widget.hbs
index 50ec812ac..29cb2e6bb 100644
--- a/web/app/components/project/jira-widget.hbs
+++ b/web/app/components/project/jira-widget.hbs
@@ -107,6 +107,7 @@
             }}
             @isShown={{true}}
             @offset={{hash mainAxis=1 crossAxis=-3}}
+            @renderOut={{true}}
           />
         {{/unless}}
       {{else if @isLoading}}