Fix HintViewer positioning (#2124)

src/components/HintViewer.scss

@@ -1,22 +1,31 @@
 @import "../css/_variables";
 
 .HintViewer {
+  pointer-events: none;
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  top: 100%;
+  max-width: 100%;
+  width: 100%;
+  margin-top: 6px;
+  text-align: center;
   color: $oc-gray-6;
   font-size: 0.8rem;
-  left: 50%;
-  pointer-events: none;
-  position: absolute;
-  top: 54px;
-  transform: translateX(calc(-50% - 16px)); /* 16px is half of lock icon */
-  padding: 0.2rem 0.4rem;
-  white-space: pre;
-  text-align: center;
-  background-color: var(--overlay-background-color);
-  border-radius: 4px;
+
+  @media (min-width: 1200px) {
+    white-space: pre;
+  }
 
   @media #{$media-query} {
     position: static;
-    transform: none;
-    margin-top: 0.5rem;
+  }
+
+  > span {
+    padding: 0.2rem 0.4rem;
+    background-color: var(--overlay-background-color);
+    border-radius: 4px;
   }
 }

src/components/LayerUI.tsx

@@ -431,7 +431,6 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        <HintViewer appState={appState} elements={elements} />
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={4}
@@ -445,6 +444,7 @@ const LayerUI = ({
               <Stack.Col gap={4} align="start">
                 <Stack.Row gap={1}>
                   <Island padding={1} className={zenModeEnabled && "zen-mode"}>
+                    <HintViewer appState={appState} elements={elements} />
                     {heading}
                     <Stack.Row gap={1}>
                       <ShapesSwitcher