From 4d2c9938cb348045cee15e8a332de606913ebd86 Mon Sep 17 00:00:00 2001
From: Jonas Finnemann Jensen <jonasfj@google.com>
Date: Tue, 1 Oct 2024 16:46:34 +0200
Subject: [PATCH] Improve banner CSS

 * On standalone pages the banner will sit in page and be hidden.
 * On package page (and landing page) the banner will float over
   content with position absolute, as these pages have sufficient
   margin to allow for this.

In both cases content will not jump when the banner is dismissed,
or when the banner is loaded.
---
 pkg/web_app/lib/src/widget/widget.dart |  4 ++--
 pkg/web_css/lib/src/_base.scss         | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/pkg/web_app/lib/src/widget/widget.dart b/pkg/web_app/lib/src/widget/widget.dart
index 5afbfe54b..edbe55615 100644
--- a/pkg/web_app/lib/src/widget/widget.dart
+++ b/pkg/web_app/lib/src/widget/widget.dart
@@ -10,7 +10,7 @@ import 'package:web/web.dart';
 
 import '../web_util.dart';
 import 'completion/widget.dart' deferred as completion;
-import 'switch/widget.dart' deferred as switch_;
+import 'switch/widget.dart' as switch_;
 
 /// Function to create an instance of the widget given an element and options.
 ///
@@ -32,7 +32,7 @@ typedef _WidgetLoaderFn = FutureOr<_WidgetFn> Function();
 /// Map from widget name to widget loader
 final _widgets = <String, _WidgetLoaderFn>{
   'completion': () => completion.loadLibrary().then((_) => completion.create),
-  'switch': () => switch_.loadLibrary().then((_) => switch_.create),
+  'switch': () => switch_.create,
 };
 
 Future<_WidgetFn> _noSuchWidget() async =>
diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index 93a541f68..bb7435509 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -393,7 +393,9 @@ pre {
   text-align: center;
 
   .dismisser {
-    float: right;
+    position: absolute;
+    display: inline-block;
+    right: 0px;
     padding: 5px 15px;
     margin-top: -5px;
     cursor: pointer;
@@ -401,22 +403,22 @@ pre {
   }
 
   &.dismissed {
-    visibility: hidden;
+    display: none;
   }
 
-  z-index: 0;
-  animation-duration: 200ms;
-  animation-name: slide-down;
-  animation-timing-function: ease;
+  z-index: 1000;
+
+  position: absolute;
+  left: 0px;
+  right: 0px;
 }
 
-@keyframes slide-down {
-  from {
-    translate: 0 -100%;
-  }
+.page-standalone .announcement-banner {
+  position: initial;
 
-  to {
-    translate: 0 0;
+  &.dismissed {
+    display: block;
+    visibility: hidden;
   }
 }