fix: Improve ViewMarkdownPanel responsive toolbar styles

Author: Mertcikla

frontend/src/components/ViewMarkdownPanel/styles.ts

@@ -34,16 +34,16 @@ export const markdownPanelBodySx: SystemStyleObject = {
     background: 'var(--bg-panel)',
     backdropFilter: 'blur(16px)',
     color: 'var(--baseText)',
-    paddingInline: '0.625rem',
-    minHeight: '44px',
+    paddingInline: '0.5rem',
+    minHeight: 'var(--topbar-h, 40px)',
     flexShrink: 0,
     overflow: 'hidden',
   },
   '.tld-markdown-mode': {
     gridColumn: '1',
     justifySelf: 'start',
     flexShrink: 0,
-    padding: '2px',
+    padding: '1px',
     border: '1px solid var(--chakra-colors-whiteAlpha-100)',
     borderRadius: 'var(--chakra-radii-md)',
     background: 'var(--chakra-colors-whiteAlpha-100)',
@@ -97,6 +97,7 @@ export const markdownPanelBodySx: SystemStyleObject = {
     gridColumn: '4',
     justifySelf: 'end',
     flexShrink: 0,
+    gap: '0.5rem',
   },
   '.tld-markdown-sync-button': {
     height: '32px',
@@ -163,8 +164,8 @@ export const markdownPanelBodySx: SystemStyleObject = {
   },
   '.tld-markdown-toolbar-action': {
     height: '32px',
-    minWidth: '34px',
-    width: '34px',
+    minWidth: '32px',
+    width: '32px',
     paddingInline: '0',
     border: '1px solid var(--chakra-colors-whiteAlpha-100)',
     borderRadius: 'var(--chakra-radii-md)',
@@ -602,37 +603,49 @@ export const markdownPanelBodySx: SystemStyleObject = {
   },
   '@container (max-width: 520px)': {
     '.tld-markdown-toolbar': {
-      gridTemplateColumns: 'minmax(0, 1fr) auto',
-      gridTemplateRows: 'auto auto',
-      alignContent: 'center',
-      rowGap: '0.35rem',
-      columnGap: '0.45rem',
-      minHeight: '84px',
-      paddingBlock: '0.42rem',
+      gridTemplateColumns: 'auto minmax(0, 1fr) auto auto',
+      gridTemplateRows: 'auto',
+      minHeight: 'var(--topbar-h, 40px)',
+      paddingBlock: 0,
     },
     '.tld-markdown-mode': {
-      gridColumn: '1 / -1',
-      justifySelf: 'center',
+      gridColumn: '1',
+      gridRow: '1',
+      justifySelf: 'start',
       maxWidth: '100%',
     },
     '.tld-markdown-mode button': {
       minWidth: '0',
-      paddingInline: '0.72rem',
+      width: '3.25rem',
+      paddingInline: '0.45rem',
+    },
+    '.tld-markdown-status': {
+      display: 'none',
+    },
+    '.tld-markdown-sync-group': {
+      maxWidth: '100%',
     },
     '.tld-markdown-toolbar-center': {
-      gridColumn: '1',
-      gridRow: '2',
+      gridColumn: '3',
+      gridRow: '1',
       justifySelf: 'end',
       minWidth: 0,
     },
     '.tld-markdown-toolbar-actions': {
-      gridColumn: '2',
-      gridRow: '2',
+      gridColumn: '4',
+      gridRow: '1',
       justifySelf: 'end',
     },
     '.tld-markdown-sync-button': {
       width: '32px',
       minWidth: '32px',
     },
   },
+  '@container (max-width: 420px)': {
+    '.tld-markdown-mode button': {
+      width: '2.8rem',
+      paddingInline: '0.3rem',
+      fontSize: '0.7rem',
+    },
+  },
 }