From 4ea9df9d33336351d8a3296e1c4cab8848c82440 Mon Sep 17 00:00:00 2001
From: Crevil <bjoern.soerensen@gmail.com>
Date: Fri, 21 May 2021 21:52:27 +0200
Subject: [PATCH] Set techdocs admonition font size to 1rem

Currently admonitions in TechDocs are rendered with font size 0.64rem which is much smaller than the rest of the text. This makes admontions hard to read and further "undo"s the attention they are here to provide.

This change adds a style overide, like we do with tables that sets the size to 1rem for bot collapsable and expanded admonitions.

Some trailing whitespace in the CSS styles is removed as well.

Signed-off-by: Crevil <bjoern.soerensen@gmail.com>
---
 .changeset/shiny-keys-dream.md                  |  6 ++++++
 .../techdocs/src/reader/components/Reader.tsx   | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/shiny-keys-dream.md

diff --git a/.changeset/shiny-keys-dream.md b/.changeset/shiny-keys-dream.md
new file mode 100644
index 0000000000..3e28f5d431
--- /dev/null
+++ b/.changeset/shiny-keys-dream.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Set admonition font size to 1rem in TechDocs to align with the rest of the document's font sizes.
+Fixes #5448 and #5541.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 09cd3abec8..c779985364 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -183,21 +183,24 @@ export const Reader = ({ entityId, onReady }: Props) => {
           border-bottom: 1px solid ${theme.palette.text.primary};
         }
         .md-typeset table:not([class]) th { font-weight: bold; }
+        .md-typeset .admonition, .md-typeset details {
+          font-size: 1rem;
+        }
         @media screen and (max-width: 76.1875em) {
-          .md-nav { 
-            background-color: ${theme.palette.background.default}; 
+          .md-nav {
+            background-color: ${theme.palette.background.default};
             transition: none !important
           }
           .md-sidebar--secondary { display: none; }
           .md-sidebar--primary { left: 72px; width: 10rem }
           .md-content { margin-left: 10rem; max-width: calc(100% - 10rem); }
           .md-content__inner { font-size: 0.9rem }
-          .md-footer { 
-            position: static; 
-            margin-left: 10rem; 
-            width: calc(100% - 10rem); 
+          .md-footer {
+            position: static;
+            margin-left: 10rem;
+            width: calc(100% - 10rem);
           }
-          .md-nav--primary .md-nav__title {  
+          .md-nav--primary .md-nav__title {
             white-space: normal;
             height: auto;
             line-height: 1rem;