FIX offline section layout

Author: pubkey

docs-src/src/components/checked-list.tsx

@@ -31,7 +31,6 @@ const defaultStyles: Record<string, CSSProperties> = {
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 'normal',
-    maxWidth: 306,
   },
   highlight: {
     color: '#e6007a',

docs-src/src/components/offline-section.tsx

@@ -39,7 +39,6 @@ export function OfflineSection(props: {
             </p>
 
             <CheckedList className='centered-mobile' style={{
-              maxWidth: 360
             }}>
               <>
                 Keep your {getAppName(props)} app running <b>offline</b>

docs-src/src/components/slider.tsx

@@ -194,7 +194,9 @@ export function Slider({ items, width = 300, gap = 28 }: SliderProps) {
 
   return (
     <div style={styles.root}>
-      <PrevArrow className='flex hide-mobile' onClick={() => scrollByItems(-1)} />
+      <PrevArrow className='flex hide-mobile' onClick={() => scrollByItems(-1)} style={{
+        zIndex: 9
+      }} />
       <div
         ref={viewportRef}
         style={styles.viewport}
@@ -221,6 +223,7 @@ export function NextArrow(props: any) {
       className={className}
       style={{
         ...style,
+        'user-select': 'none',
         position: 'absolute',
         top: 0,
         right: -15,
@@ -244,6 +247,7 @@ export function PrevArrow(props: any) {
       className={className}
       style={{
         ...style,
+        'user-select': 'none',
         position: 'absolute',
         top: 0,
         left: 0,

docs-src/src/css/custom.css

@@ -608,7 +608,6 @@ body {
     display: flex;
     flex-direction: column;
     background: var(--bg-color-dark);
-    padding: 12px 12px 9px 12px;
     width: 300px;
 }
 
@@ -619,9 +618,7 @@ body {
 }
 
 .slider-content .slider-profile {
-    display: flex;
     margin-top: 30px;
-    gap: 10px;
 }
 
 .slider-content .slider-profile img {
@@ -641,7 +638,7 @@ body {
 }
 
 .slider-content .slider-profile .slider-info {
-    margin-left: 10px;
+    margin-left: 16px;
     width: 70%;
 }
 
@@ -843,9 +840,16 @@ body {
     padding-right: 10px;
 }
 
+.width-140-120 {
+    width: 140px;
+}
 
 
 @media (max-width: 900px) {
+    .width-140-120 {
+        width: 120px;
+    }
+
     .margin-right-6-8 {
         margin-right: 8px;
     }
@@ -1184,7 +1188,8 @@ body {
 }
 
 .block.offline-first p {
-    margin-top: 31px;
+    margin-top: 32px;
+    margin-bottom: 32px;
 }
 
 
@@ -3238,7 +3243,7 @@ footer a:visited {
 .slider-content .slider-profile {
     display: flex;
     margin-top: auto;
-    gap: 16px;
+    gap: 0px;
     align-items: center;
 }
 

docs-src/src/theme/Footer/index.js

@@ -98,7 +98,7 @@ export default function FooterWrapper() {
                   href="/"
                   className="footer-logo-button"
                 >
-                  <img src="/files/logo/logo_text_white.svg" alt="RxDB" loading="lazy" style={{ width: 100 }} />
+                  <img src="/files/logo/logo_text_white.svg" alt="RxDB" loading="lazy" className='width-140-120' />
                 </a>
                 <div className="footer-community-links">
                   {footerConfig.communityLinks.map((link, index) => (
@@ -146,15 +146,23 @@ export default function FooterWrapper() {
                     {link.label}
                   </a>
                 ))}
-                {/* <span className="footer-rights">{rightsText}</span> */}
               </div>
-
-
-
             </div>
           </div>
         </div>
       </>
+      <div
+        className='navbar-line'
+        style={{
+          display: 'block',
+          zIndex: 10,
+          height: 1.5,
+          backgroundColor: 'var(--color-top)',
+          borderTopRightRadius: 2,
+          borderBottomRightRadius: 2,
+          width: '100%'
+        }}
+      ></div>
     </>
   );
 }

docs-src/src/theme/Navbar/index.js

@@ -5,6 +5,8 @@ import {
 } from 'react';
 import Navbar from '@theme-original/Navbar';
 
+
+
 export default function NavbarWrapper(props) {
   const [scrollPosition, setScrollPosition] = useState(0);
   const handleScroll = () => {