M: Minor style fixes

TODO.txt

@@ -1,6 +1,9 @@
 !! This is not complete list of TODOs !!
 For more specific TODOs see comments in code
 
+[Bugs - PENDING]
+- Tab index still selecting background elements when modal is active
+
 [Functionality - PROGRESS]
 - OSS change propagation: Advanced features
 

rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx

@@ -35,7 +35,7 @@ function ManualsPage() {
   );
 
   return (
-    <div className='flex mx-auto max-w-[80rem]' style={{ minHeight: mainHeight }}>
+    <div className='flex mx-auto max-w-[80rem]' role='manuals' style={{ minHeight: mainHeight }}>
       <TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />
       <ViewTopic topic={activeTopic} />
     </div>

rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx

@@ -12,7 +12,11 @@ interface ViewTopicProps {
 function ViewTopic({ topic }: ViewTopicProps) {
   const { mainHeight } = useConceptOptions();
   return (
-    <AnimateFade key={topic} className='py-2 px-6 sm:px-12 overflow-y-auto' style={{ maxHeight: mainHeight }}>
+    <AnimateFade
+      key={topic}
+      className='py-2 px-6 mx-auto sm:mx-0 lg:px-12 overflow-y-auto'
+      style={{ maxHeight: mainHeight }}
+    >
       <TopicPage topic={topic} />
     </AnimateFade>
   );

rsconcept/frontend/src/pages/OssPage/EditorOssCard/EditorOssCard.tsx

@@ -49,7 +49,7 @@ function EditorOssCard({ isModified, onDestroy, setIsModified }: EditorOssCardPr
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto pt-[1.9rem]', 'flex flex-col md:flex-row px-6')}
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto pt-[1.9rem]', 'flex flex-row flex-wrap px-6')}
       >
         <FlexColumn className='px-3'>
           <FormOSS id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx

@@ -49,7 +49,7 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-col md:flex-row px-6 pt-[1.9rem]')}
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-row flex-wrap px-6 pt-[1.9rem]')}
       >
         <FlexColumn className='flex-shrink'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />

rsconcept/frontend/src/styling/constants.css

@@ -7,6 +7,14 @@
   --font-ui:  'Alegreya Sans SC', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
   --font-main: 'Rubik', 'Noto Color Emoji', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
   --font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
+  
+  /* Numeric parameters */
+  --font-size-base: 16px;
+  --font-size-sm: 12px;
+  --line-height: 1.5;
+
+  --text-max-width: 75ch;
+  --scroll-padding: 3rem;
 
   /* Light Theme */
   --cl-bg-120:      hsl(000, 000%, 100%);

rsconcept/frontend/src/styling/setup.css

@@ -8,22 +8,23 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  -webkit-text-size-adjust: 100%;
+html {
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
 
-  width: 100%;
-  height: 100%;
+  hanging-punctuation: first last;
+  color-scheme: dark light;
+
+  /* interpolate-size: allow-keywords; */
+}
+
+body {
   margin: 0px;
   padding: 0px;
   overflow-x: hidden;
 }
 
-html {
-  hanging-punctuation: first last;
-  color-scheme: dark light;
-}
-
 [data-color-scheme='dark'] {
   color-scheme: dark;
 }
@@ -36,13 +37,13 @@ html {
 @media (prefers-reduced-motion: no-preference) {
   :has(:target) {
     scroll-behavior: smooth;
-    scroll-padding-top: 3rem;
+    scroll-padding-top: var(--scroll-padding);
   }
 }
 
 :root {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height);
   font-family: var(--font-main);
 
   color: var(--cl-fg-100);
@@ -58,8 +59,7 @@ html {
 
 @media only screen and (max-width: 639px) {
   :root {
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--font-size-sm);
   }
 }
 
@@ -104,7 +104,7 @@ h6 {
 /* Limit text lines and setup wrapping */
 p,
 li {
-  max-width: 75ch;
+  max-width: var(--text-max-width);
   text-wrap: pretty;
 }
 
@@ -119,6 +119,9 @@ div:not(.dense) > p {
 
   h2 {
     @apply [&:not(:first-child)]:mt-2 font-semibold text-center;
+    [role='manuals'] & {
+      @apply [&:not(:first-child)]:mt-3 mb-2;
+    }
   }
 
   b {