feat(3000): adapt hogql editor styles (#19326)

PostHog · Dec 14, 2023 · a667f1f · a667f1f
1 parent af66a97
commit a667f1f
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/frontend/__snapshots__/scenes-app-dashboards--create-template.png b/frontend/__snapshots__/scenes-app-dashboards--create-template.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit-template.png b/frontend/__snapshots__/scenes-app-dashboards--edit-template.png
diff --git a/frontend/src/lib/components/CodeEditors.tsx b/frontend/src/lib/components/CodeEditors.tsx
@@ -18,6 +18,7 @@ export function CodeEditor({ options, ...editorProps }: CodeEditorProps): JSX.El
             loading={<Spinner />}
             options={{
                 ...options,
+                padding: { bottom: 8, top: 8 },
                 scrollbar: {
                     vertical: scrollbarRendering,
                     horizontal: scrollbarRendering,

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -49,7 +49,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
         <div className="space-y-2">
             <div
                 data-attr="hogql-query-editor"
-                className={clsx('flex flex-col rounded bg-bg-light space-y-2 w-full', !props.embedded && 'p-2 border')}
+                className={clsx('flex flex-col rounded space-y-2 w-full', !props.embedded && 'p-2 border')}
             >
                 <FlaggedFeature flag={FEATURE_FLAGS.ARTIFICIAL_HOG}>
                     <div className="flex gap-2">
@@ -86,7 +86,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                 </FlaggedFeature>
                 {promptError ? <LemonBanner type="warning">{promptError}</LemonBanner> : null}
                 <div className="relative flex-1 overflow-hidden">
-                    <span className="absolute top-0 right-0 mt-1 mr-1 z-10">
+                    <span className="absolute top-0 right-0 mt-1 mr-5 z-10 bg-bg-light">
                         <LemonButtonWithDropdown
                             icon={<IconInfo />}
                             type="secondary"
@@ -121,7 +121,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                     {/* eslint-disable-next-line react/forbid-dom-props */}
                     <div className="resize-y overflow-hidden" style={{ height: 222 }}>
                         <CodeEditor
-                            className="py-2 border rounded overflow-hidden h-full"
+                            className="border rounded overflow-hidden h-full"
                             language="mysql"
                             value={queryInput}
                             onChange={(v) => setQueryInput(v ?? '')}
@@ -237,7 +237,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                             }
                             data-attr="hogql-query-editor-save-as-view"
                         >
-                            {'Save as View'}
+                            Save as View
                         </LemonButton>
                     ) : null}
                     {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE_VIEWS] && (