Show hint under toolbar (#783)

src/components/HintViewer.css

@@ -1,8 +1,12 @@
 .HintViewer {
-  position: absolute;
+  background-color: rgba(255, 255, 255, 0.88);
-  left: 0.5em;
+  color: #868e96; /* OC: GRAY 6*/
-  bottom: 0.5em;
   font-size: 0.8rem;
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  top: 54px;
+  transform: translateX(calc(-50% - 16px)); /* 16px is half of lock icon */
 }
 
 @media (max-width: 600px), (max-height: 500px) and (max-width: 1000px) {

src/index.tsx

@@ -518,6 +518,12 @@ const LayerUI = React.memo(
     ) : (
       <>
         <FixedSideContainer side="top">
+          <HintViewer
+            elementType={appState.elementType}
+            multiMode={appState.multiElement !== null}
+            isResizing={appState.isResizing}
+            elements={elements}
+          />
           <div className="App-menu App-menu_top">
             <Stack.Col gap={4} align="end">
               <section
@@ -578,12 +584,6 @@ const LayerUI = React.memo(
           </div>
         </FixedSideContainer>
         <footer role="contentinfo">
-          <HintViewer
-            elementType={appState.elementType}
-            multiMode={appState.multiElement !== null}
-            isResizing={appState.isResizing}
-            elements={elements}
-          />
           <LanguageList
             onChange={lng => {
               setLanguage(lng);