make auth-restriction div / media-component-body div space sharing mo…

…re consistent

* start with the auth-restriction div hidden when the DOM is initially rendered
* un-hide it in the methods that do other DOM manipulation to display auth restriction messages conditionally based on authResponse
* hide it if the auth-restriction message is dismissed
* simplify the CSS selector for media-component-body sizing, since now it only has to care about whether auth-restriction div is hidden or not
* rename a method for accuracy, take advantage of a possible simplification (stimulus auth_restriction_controller.dismissStanfordRestriction becomes .hideLoginPrompt)

otherwise, i found that the old CSS was sometimes subtracting from max-height for media-component-body when it should've been left full height, presumably some things in the more complex selector weren't hidden as expected.

app/assets/stylesheets/media.scss

@@ -275,8 +275,7 @@
     flex-shrink: 0;
   }
 
-  // First selector is for embargo. Last selector is other auth restrictions
-  .authLinkWrapper + .media-component-body, [data-controller="auth-restriction"]:has(.authLinkWrapper:not([hidden])) + .media-component-body {
+  [data-controller="auth-restriction"]:not([hidden]) + .media-component-body {
     max-height: calc(100vh - 100px); // Scroll height for metadata when the auth wrapper is displaying
   }
 

app/components/embed/media_with_companion_windows_component.html.erb

@@ -14,7 +14,7 @@
     </nav>
   </header>
 
-  <div data-controller="auth-restriction" data-action="auth-denied@window->auth-restriction#displayMessage auth-stanford-restricted@window->auth-restriction#displayStanfordRestriction auth-success@window->auth-restriction#hideLoginPrompt">
+  <div data-controller="auth-restriction" data-action="auth-denied@window->auth-restriction#displayMessage auth-stanford-restricted@window->auth-restriction#displayStanfordRestriction auth-success@window->auth-restriction#hideLoginPrompt" data-auth-restriction-target="authRestrictionMessagesContainer" hidden="true">
     <div data-auth-restriction-target="locationRestriction" hidden="true">
       <div class="authLinkWrapper">
         <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M22 4v-.5C22 2.12 20.88 1 19.5 1S17 2.12 17 3.5V4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-.8 0h-3.4v-.5c0-.94.76-1.7 1.7-1.7s1.7.76 1.7 1.7V4zm-2.28 8c.04.33.08.66.08 1 0 2.08-.8 3.97-2.1 5.39-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H7v-2h2c.55 0 1-.45 1-1V8h2c1.1 0 2-.9 2-2V3.46c-.95-.3-1.95-.46-3-.46C5.48 3 1 7.48 1 13s4.48 10 10 10 10-4.48 10-10c0-.34-.02-.67-.05-1h-2.03zM10 20.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L8 16v1c0 1.1.9 2 2 2v1.93z"></path></svg>
@@ -29,7 +29,7 @@
         </svg>
         <p class="loginMessage" data-auth-restriction-target="stanfordRestrictionMessage">Stanford users: log in to access all available features.</p>
         <button data-auth-restriction-target="stanfordLoginButton" data-action="media-tag#logIn">Log in</button>
-        <button class="dismissButton" hidden="true" data-auth-restriction-target="stanfordRestrictionDismissButton" data-action="auth-restriction#dismissStanfordRestriction">
+        <button class="dismissButton" hidden="true" data-auth-restriction-target="stanfordRestrictionDismissButton" data-action="auth-restriction#hideAuthRestrictionMessages">
           <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
         </button>
       </div>

app/javascript/controllers/auth_restriction_controller.js

@@ -4,7 +4,7 @@ export default class extends Controller {
   static targets = ["stanfordRestriction", "stanfordRestrictionMessage", "stanfordRestrictionNotLoggedInIcon",
                     "stanfordRestrictionLoggedInIcon", "stanfordRestrictionDismissButton", "stanfordLoginButton",
                     "locationRestriction", "embargoRestriction", "embargoAndStanfordRestriction",
-                    "embargoLoginButton"]
+                    "embargoLoginButton", "authRestrictionMessagesContainer"]
 
 
   displayMessage(event) {
@@ -31,26 +31,30 @@ export default class extends Controller {
     this.stanfordRestrictionDismissButtonTarget.hidden = false
   }
 
-  dismissStanfordRestriction() {
-    this.stanfordRestrictionTarget.hidden = true
+  hideAuthRestrictionMessages() {
+    this.authRestrictionMessagesContainerTarget.hidden = true
   }
 
   displayStanfordRestriction(loginService) {
+    this.authRestrictionMessagesContainerTarget.hidden = false
     this.stanfordLoginButtonTarget.dataset.mediaTagLoginServiceParam = loginService['@id']
     this.stanfordRestrictionTarget.hidden = false
   }
 
   displayLocationRestriction(restrictionLocation) {
+    this.authRestrictionMessagesContainerTarget.hidden = false
     this.locationRestrictionTarget.querySelector('.loginMessage').innerText = `Access is restricted to the ${restrictionLocation.label}. See Access conditions for more information.`
     this.locationRestrictionTarget.hidden = false
   }
 
   displayEmbargoRestriction(embargo) {
+    this.authRestrictionMessagesContainerTarget.hidden = false
     this.embargoRestrictionTarget.querySelector('.loginMessage').innerText = `Access is restricted until ${this.formattedEmbargo(embargo)}`
     this.embargoRestrictionTarget.hidden = false
   }
 
   displayEmbargoAndStanfordRestriction(embargo, loginService) {
+    this.authRestrictionMessagesContainerTarget.hidden = false
     this.embargoAndStanfordRestrictionTarget.querySelector('.loginMessage').innerText = `Access is restricted to Stanford-affiliated patrons until ${this.formattedEmbargo(embargo)}`
     this.embargoLoginButtonTarget.dataset.mediaTagLoginServiceParam = loginService['@id']
     this.embargoAndStanfordRestrictionTarget.hidden = false