Merge pull request #12641 from gabrielucido/techdocs-layout-improvement-3

fix(docs-like-code): Patched Techdocs Sidebar layout for medium devices.

.changeset/mighty-penguins-tap.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed techdocs sidebar layout bug for medium devices.

plugins/techdocs/src/reader/transformers/styles/rules/layout.ts

@@ -16,6 +16,8 @@
 
 import { RuleOptions } from './types';
 
+const SIDEBAR_WIDTH = '224px';
+
 export default ({ theme, sidebar }: RuleOptions) => `
 /*==================  Layout  ==================*/
 
@@ -61,7 +63,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
   scrollbar-width: thin;
 }
 .md-sidebar .md-sidebar__scrollwrap {
-  width: calc(16rem - 10px);
+  width: calc(12.1rem);
 }
 .md-sidebar--secondary {
   right: ${theme.spacing(3)}px;
@@ -169,7 +171,9 @@ export default ({ theme, sidebar }: RuleOptions) => `
     width: 12.1rem !important;
     z-index: 200;
     left: ${
-      sidebar.isPinned ? 'calc(-12.1rem + 242px)' : 'calc(-12.1rem + 72px)'
+      sidebar.isPinned
+        ? `calc(-12.1rem + ${SIDEBAR_WIDTH})`
+        : 'calc(-12.1rem + 72px)'
     } !important;
   }
   .md-sidebar--secondary:not([hidden]) {