From be13dfe61a96387afed22969002a19ae48850753 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 16 Sep 2021 12:22:19 +0200
Subject: [PATCH] Make techdocs context search bar width adjust on smaller
 screens

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/techdocs-shy-beans-prove.md            | 5 +++++
 plugins/techdocs/src/reader/components/Reader.tsx | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/techdocs-shy-beans-prove.md

diff --git a/.changeset/techdocs-shy-beans-prove.md b/.changeset/techdocs-shy-beans-prove.md
new file mode 100644
index 0000000000..5aa9db1da7
--- /dev/null
+++ b/.changeset/techdocs-shy-beans-prove.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Make techdocs context search bar width adjust on smaller screens.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 5fe395e131..b1205e7dd9 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -64,6 +64,10 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     marginLeft: '20rem',
     maxWidth: 'calc(100% - 20rem * 2 - 3rem)',
     marginTop: theme.spacing(1),
+    '@media screen and (max-width: 76.1875em)': {
+      marginLeft: '10rem',
+      maxWidth: 'calc(100% - 10rem)',
+    },
   },
 }));