fix: improve styling and UI positions

HerringtonDarkholme · HerringtonDarkholme · commit ac10b6e11165 · 2025-02-15T18:25:31.000-05:00
diff --git a/website/src/components/Playground.vue b/website/src/components/Playground.vue
@@ -11,7 +11,7 @@ import EnvDisplay from './EnvDisplay.vue'
 import { initializeParser, useAstGrep, Mode as ModeImport } from './astGrep'
 
 // important initialization
-await initializeParser()
+// await initializeParser()
 
 const {
   state,
@@ -72,6 +72,7 @@ let codeMode = shallowRef('code')
               Found {{ matchedHighlights.length }} match(es).
             </span>
             <span v-else>No match found.</span>
+            <ResetConfig @reset="reset" />
           </p>
         </template>
       </Tabs>
@@ -96,7 +97,6 @@ let codeMode = shallowRef('code')
         <template #addon>
           <div class="action-bar">
             <SelectLang v-model="lang"/>
-            <ResetConfig @reset="reset" />
           </div>
         </template>
       </Tabs>
@@ -125,6 +125,13 @@ let codeMode = shallowRef('code')
   /* keep here since monaco suggestion details are not expanded by default */
   filter: drop-shadow(0 0 16px #00000020);
 }
+
+.match-result {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .action-bar {
   display: flex;
   align-items: center;
diff --git a/website/src/components/ResetConfig.vue b/website/src/components/ResetConfig.vue
@@ -18,7 +18,7 @@ const emits = defineEmits<{
   height: 2em;
   border-radius: 50%;
   padding: 0px;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: transparent;
diff --git a/website/src/components/Toolbars.vue b/website/src/components/Toolbars.vue
@@ -22,7 +22,7 @@ async function onShare() {
 
 <template>
   <div class="toolbars">
-    <button class="floating" title="Copy your code URL to share!" @click="onShare">
+    <button class="floating" data-title="Copy your code URL to share!" @click="onShare">
       <Share style="width: 24px; height: 24px;"/>
     </button>
     <button
@@ -66,12 +66,12 @@ async function onShare() {
 }
 
 @media only screen and (min-width: 780px) {
-  [title] {
+  [data-title] {
     position: relative;
   }
 
-  [title]:after {
-    content: attr(title);
+  [data-title]:after {
+    content: attr(data-title);
     position: absolute;
     left: -10%;
     bottom: 50%;
@@ -85,12 +85,12 @@ async function onShare() {
     transition: 0.2s;
     border-radius: 5px;
   }
-  
-  .dark [title]:after {
+
+  .dark [data-title]:after {
     color: var(--vp-c-brand-1);
   }
 
-  [title]:hover:after {
+  [data-title]:hover:after {
     opacity: 1;
   }
 }
