From 03643e49a9209c75b6bba36db42b0c13624cae08 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:53:55 +0300
Subject: [PATCH] M: Minor fix to AST viewer

---
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx | 18 +++++++++++++-----
 rsconcept/frontend/src/styling/color.ts       |  3 +++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 3206fcda..8e257c1e 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -53,11 +53,19 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
   const handleHoverOut = useCallback(() => setHoverID(undefined), []);
 
   return (
-    <Modal readonly hideWindow={hideWindow} className='px-6'>
-      <Overlay position='left-[-1rem] top-[0.25rem]'>
+    <Modal
+      readonly
+      hideWindow={hideWindow}
+      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
+    >
+      <Overlay position='left-[0.5rem] top-[0.25rem]'>
         <BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} />
       </Overlay>
-      <div className='my-2 text-lg text-center'>
+      <Overlay
+        position='top-2 right-1/2 translate-x-1/2'
+        className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
+        style={{ backgroundColor: colors.bgBlur }}
+      >
         {!hoverNode ? expression : null}
         {hoverNode ? (
           <div>
@@ -66,8 +74,8 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
             <span>{expression.slice(hoverNode.finish)}</span>
           </div>
         ) : null}
-      </div>
-      <div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100svh-14rem-2px)]'>
+      </Overlay>
+      <div className='flex-grow relative'>
         <GraphUI
           animated={false}
           nodes={nodes}
diff --git a/rsconcept/frontend/src/styling/color.ts b/rsconcept/frontend/src/styling/color.ts
index d20408a7..ca0660e3 100644
--- a/rsconcept/frontend/src/styling/color.ts
+++ b/rsconcept/frontend/src/styling/color.ts
@@ -12,6 +12,7 @@ import { ISyntaxTreeNode, TokenID } from '@/models/rslang';
  */
 export interface IColorTheme {
   bgDefault: string;
+  bgBlur: string;
   bgInput: string;
   bgControls: string;
   bgDisabled: string;
@@ -52,6 +53,7 @@ export interface IColorTheme {
 // prettier-ignore
 export const lightT: IColorTheme = {
   bgDefault:  'hsl(000, 000%, 098%)', //var(--cl-bg-100)',
+  bgBlur:     'hsla(000, 000%, 098%, 0.8)',
   bgInput:    'var(--cl-bg-120)',
   bgControls: 'var(--cl-bg-80)',
   bgDisabled: 'var(--cl-bg-60)',
@@ -92,6 +94,7 @@ export const lightT: IColorTheme = {
 // prettier-ignore
 export const darkT: IColorTheme = {
   bgDefault:  'hsl(000, 000%, 005%)', //'var(--cd-bg-100)',
+  bgBlur:     'hsla(000, 000%, 005%, 0.3)',
   bgInput:    'var(--cd-bg-120)',
   bgControls: 'var(--cd-bg-80)',
   bgDisabled: 'var(--cd-bg-60)',