clean css selectors

GoogleChromeLabs · Feb 19, 2025 · 581adb3 · 581adb3
1 parent 1b321a4
commit 581adb3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 45 deletions.
diff --git a/packages/extension/src/view/devtools/app.css b/packages/extension/src/view/devtools/app.css
@@ -151,17 +151,27 @@ body {
   position: relative;
 }
 
-#bubble-container {
+/* bubble wrapper */
+#bubble-container-div {
   position: sticky;
+  top: 5px;
+  left: 5px;
+  z-index: 4;
+  height: 100%;
+  width: 100%;
   pointer-events: none;
-  top: 0px;
-  left: 0px;
 }
 
-.minified-bubble-container {
-  position: sticky;
-  top: 10px;
-  left: 10px;
+#bubble-container-div.expanded {
+  backdrop-filter: blur(1px);
+  z-index: 4;
+}
+
+/* bubble element */
+#minified-bubble-container {
+  position: absolute;
+  top: 5px;
+  left: 5px;
   height: 50px;
   width: 50px;
   border-radius: 50%;
@@ -172,34 +182,10 @@ body {
   align-items: center;
   justify-content: center;
   transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
+  pointer-events: auto;
 }
 
-.circle-svg:hover:active {
-  cursor: pointer;
-}
-
-.text-class {
-  pointer-events: none;
-}
-
-.svg {
-  cursor: pointer;
-}
-
-.circle-svg {
-  transition: transform 0.2s;
-}
-
-.circle-svg:hover {
-  transform: scale(1.05);
-  cursor: pointer;
-}
-
-text {
-  cursor: pointer;
-}
-
-.minified-bubble-container.expanded {
+#minified-bubble-container.expanded {
   position: absolute;
   display: block;
   top: var(--expandedBubbleY);
@@ -248,17 +234,27 @@ text {
   display: flex;
 }
 
-#bubble-container-div {
-  position: sticky;
-  top: 5px;
-  left: 5px;
-  z-index: 4;
+.circle-svg:hover:active {
+  cursor: pointer;
+}
+
+.text-class {
   pointer-events: none;
-  height: 100%;
-  width: 100%;
 }
 
-#bubble-container-div.bubble-container.expanded {
-  backdrop-filter: blur(1px);
-  z-index: 4;
+.svg {
+  cursor: pointer;
+}
+
+.circle-svg {
+  transition: transform 0.2s;
+}
+
+.circle-svg:hover {
+  transform: scale(1.05);
+  cursor: pointer;
+}
+
+text {
+  cursor: pointer;
 }
diff --git a/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx b/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx
@@ -295,8 +295,8 @@ const Panel = ({
 
       if (div) {
         const { visibleWidth, visibleHeight, newSize } = getDivDimensions();
-        const centerX = visibleWidth / 2 - newSize;
-        const centerY = visibleHeight / 4 - newSize / 4;
+        const centerX = visibleWidth / 2 - newSize / 2;
+        const centerY = visibleHeight / 2 - newSize / 2;
 
         setExpandedBubbleX(centerX);
         setExpandedBubbleY(centerY);