Fix width issue

Author: Blargian

src/components/Feedback/index.jsx

@@ -191,6 +191,7 @@ export default function Feedback({side}) {
 
 
   return (
+    <div className={styles.displayFeedback}>
     <Panel hasBorder alignItems='start'>
     <Popover open={open} >
         <Popover.Trigger>
@@ -212,6 +213,7 @@ export default function Feedback({side}) {
             selected === 'neg' && negative_feedback
         }
       </Popover>
-    </Panel>  
+    </Panel>
+    </div>
   );
 }

src/components/Feedback/styles.module.scss

@@ -1,30 +1,46 @@
-.Button {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-right: 8px;
-  border: 1px solid;
-  background-color: transparent;
-
-  &.dark {
-    border-color: #323232;
-    background-color: transparent;
-
-    &.selected {
-      background-color: #282828;
+@use '../../css/breakpoints.scss' as breakpoints;
+
+.displayFeedback {
+  display: none;
+}
+
+@media screen and (min-width: breakpoints.$laptop-breakpoint) {
+
+    .displayFeedback {
+      display: flex;
     }
-  }
 
-  &.light {
-    border-color: #E6E7E9;
-    background-color: #fff;
+    .Button {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-right: 8px;
+      border: 1px solid;
+      background-color: transparent;
+
+      &.dark {
+        border-color: #323232;
+        background-color: transparent;
 
-    &.selected {
-      background-color: #F6F7FA;
+        &.selected {
+          background-color: #282828;
+        }
+      }
+
+      &.light {
+        border-color: #E6E7E9;
+        background-color: #fff;
+
+        &.selected {
+          background-color: #F6F7FA;
+        }
+      }
     }
-  }
 }
+
+
+

src/theme/DocItem/TOC/Desktop/index.js

@@ -4,7 +4,7 @@ import {useDoc} from '@docusaurus/plugin-content-docs/client';
 import TOC from '@theme/TOC';
 import clsx from "clsx";
 import IconClose from '@theme/Icon/Close';
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 import Feedback from '../../../../components/Feedback';
 
 const AD_DATA_ENDPOINT = 'https://cms.clickhouse-dev.com:1337/api/docs-ad'
@@ -89,7 +89,7 @@ export default function DocItemTOCDesktop() {
 
       {
         !isClosed && title && description && href && label && (
-          <div className={styles.docCloudCard}>
+          <div className={styles.docCloudCardAd}>
             <div className={styles.docCloudCardHeader}>
               <h6>{title}</h6>
               <button

src/theme/DocItem/TOC/Desktop/styles.module.css renamed to src/theme/DocItem/TOC/Desktop/styles.module.scss

@@ -1,9 +1,15 @@
+@use '../../../../css/breakpoints.scss' as breakpoints;
+
 .docTOC {
   top: 0;
   position: relative;
   max-height: initial;
 }
 
+.docCloudCardAd {
+    display: none; // don't show by default on mobile
+}
+
 .docTOCContainer {
   height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
   display: flex;
@@ -15,15 +21,6 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-.docCloudCard {
-  background: var(--click-cloud-card-background);
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 24px;
-}
-
 .docCloudCardHeader {
   display: flex;
   flex-wrap: nowrap;
@@ -61,7 +58,18 @@
 }
 
 @media (max-height: 700px) {
-  .docCloudCard {
+  .docCloudCardAd {
     display: none;
   }
 }
+
+@media screen and (min-width: breakpoints.$laptop-breakpoint) {
+  .docCloudCardAd {
+    background: var(--click-cloud-card-background);
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 24px;
+  }
+}