fix(plugin-techdocs): adjust reader search margins

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs/src/reader/components/Reader.tsx

@@ -69,12 +69,13 @@ type Props = {
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   searchBar: {
-    marginLeft: '16rem',
-    maxWidth: 'calc(100% - 16rem * 2)',
-    marginTop: theme.spacing(1),
+    maxWidth: 'calc(100% - 16rem * 2 - 2.4rem)',
+    marginTop: 0,
+    marginBottom: theme.spacing(1),
+    marginLeft: 'calc(16rem + 1.2rem)',
     '@media screen and (max-width: 76.1875em)': {
-      marginLeft: '10rem',
-      maxWidth: 'calc(100% - 10rem)',
+      marginLeft: 'calc(10rem + 0.8rem)',
+      maxWidth: 'calc(100% - 10rem - 1.6rem)',
     },
   },
 }));
@@ -391,7 +392,7 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
           // Layout
           css: `
             .md-grid {
-              max-width: 90vw;
+              max-width: 100%;
               margin: 0;
             }
 
@@ -483,6 +484,9 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
               .md-nav--primary :is(.md-nav__title,.md-nav__item) {
                 font-size : var(--md-typeset-font-size);
               }
+              .md-nav .md-source {
+                display: none;
+              }
 
               .md-sidebar--primary {
                 width: 10rem !important;
@@ -545,6 +549,10 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
                 }
               `);
             }, '')}
+
+            .md-typeset .md-content__button {
+              color: var(--md-default-fg-color);
+            }
             
             .md-typeset hr {
               border-bottom: 0.05rem dotted ${theme.palette.divider};

plugins/techdocs/src/reader/components/TechDocsSearch.tsx

@@ -17,8 +17,8 @@
 import { EntityName } from '@backstage/catalog-model';
 import { SearchContextProvider, useSearch } from '@backstage/plugin-search';
 import {
+  makeStyles,
   CircularProgress,
-  Grid,
   IconButton,
   InputAdornment,
   TextField,
@@ -30,6 +30,12 @@ import { useNavigate } from 'react-router';
 import useDebounce from 'react-use/lib/useDebounce';
 import { DocsResultListItem } from '../../components/DocsResultListItem';
 
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+  },
+});
+
 type TechDocsSearchProps = {
   entityId: EntityName;
   debounceTime?: number;
@@ -60,6 +66,7 @@ const TechDocsSearchBar = ({
     setTerm,
     result: { loading, value: searchVal },
   } = useSearch();
+  const classes = useStyles();
   const [options, setOptions] = useState<any[]>([]);
   useEffect(() => {
     let mounted = true;
@@ -95,67 +102,66 @@ const TechDocsSearchBar = ({
   };
 
   return (
-    <Grid item xs={12}>
-      <Autocomplete
-        data-testid="techdocs-search-bar"
-        size="small"
-        open={open}
-        getOptionLabel={() => ''}
-        filterOptions={x => {
-          return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
-        }}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onFocus={() => {
-          setOpen(true);
-        }}
-        onChange={handleSelection}
-        blurOnSelect
-        noOptionsText="No results found"
-        value={null}
-        options={options}
-        renderOption={({ document }) => (
-          <DocsResultListItem
-            result={document}
-            lineClamp={3}
-            asListItem={false}
-            asLink={false}
-            title={document.title}
-          />
-        )}
-        loading={loading}
-        renderInput={params => (
-          <TextField
-            {...params}
-            data-testid="techdocs-search-bar-input"
-            variant="outlined"
-            fullWidth
-            placeholder={`Search ${entityId.name} docs`}
-            value={value}
-            onChange={handleQuery}
-            InputProps={{
-              ...params.InputProps,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <IconButton aria-label="Query" disabled>
-                    <SearchIcon />
-                  </IconButton>
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <React.Fragment>
-                  {loading ? (
-                    <CircularProgress color="inherit" size={20} />
-                  ) : null}
-                  {params.InputProps.endAdornment}
-                </React.Fragment>
-              ),
-            }}
-          />
-        )}
-      />
-    </Grid>
+    <Autocomplete
+      classes={{ root: classes.root }}
+      data-testid="techdocs-search-bar"
+      size="small"
+      open={open}
+      getOptionLabel={() => ''}
+      filterOptions={x => {
+        return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onFocus={() => {
+        setOpen(true);
+      }}
+      onChange={handleSelection}
+      blurOnSelect
+      noOptionsText="No results found"
+      value={null}
+      options={options}
+      renderOption={({ document }) => (
+        <DocsResultListItem
+          result={document}
+          lineClamp={3}
+          asListItem={false}
+          asLink={false}
+          title={document.title}
+        />
+      )}
+      loading={loading}
+      renderInput={params => (
+        <TextField
+          {...params}
+          data-testid="techdocs-search-bar-input"
+          variant="outlined"
+          fullWidth
+          placeholder={`Search ${entityId.name} docs`}
+          value={value}
+          onChange={handleQuery}
+          InputProps={{
+            ...params.InputProps,
+            startAdornment: (
+              <InputAdornment position="start">
+                <IconButton aria-label="Query" disabled>
+                  <SearchIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <React.Fragment>
+                {loading ? (
+                  <CircularProgress color="inherit" size={20} />
+                ) : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),
+          }}
+        />
+      )}
+    />
   );
 };
 

plugins/techdocs/src/reader/components/TechDocsStateIndicator.tsx

@@ -23,7 +23,10 @@ import { TechDocsBuildLogs } from './TechDocsBuildLogs';
 import { TechDocsNotFound } from './TechDocsNotFound';
 import { useTechDocsReader } from './Reader';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginBottom: theme.spacing(2),
+  },
   message: {
     // `word-break: break-word` is deprecated, but gives legacy support to browsers not supporting `overflow-wrap` yet
     // https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
@@ -58,6 +61,7 @@ export const TechDocsStateIndicator = () => {
   if (state === 'INITIAL_BUILD') {
     StateAlert = (
       <Alert
+        classes={{ root: classes.root }}
         variant="outlined"
         severity="info"
         icon={<CircularProgress size="24px" />}
@@ -76,6 +80,7 @@ export const TechDocsStateIndicator = () => {
         severity="info"
         icon={<CircularProgress size="24px" />}
         action={<TechDocsBuildLogs buildLog={buildLog} />}
+        classes={{ root: classes.root }}
       >
         A newer version of this documentation is being prepared and will be
         available shortly.
@@ -93,6 +98,7 @@ export const TechDocsStateIndicator = () => {
             Refresh
           </Button>
         }
+        classes={{ root: classes.root }}
       >
         A newer version of this documentation is now available, please refresh
         to view.
@@ -106,7 +112,7 @@ export const TechDocsStateIndicator = () => {
         variant="outlined"
         severity="error"
         action={<TechDocsBuildLogs buildLog={buildLog} />}
-        classes={{ message: classes.message }}
+        classes={{ root: classes.root, message: classes.message }}
       >
         Building a newer version of this documentation failed.{' '}
         {syncErrorMessage}
@@ -122,7 +128,7 @@ export const TechDocsStateIndicator = () => {
             variant="outlined"
             severity="error"
             action={<TechDocsBuildLogs buildLog={buildLog} />}
-            classes={{ message: classes.message }}
+            classes={{ root: classes.root, message: classes.message }}
           >
             Building a newer version of this documentation failed.{' '}
             {syncErrorMessage}