fix: add disclaimer

packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/20-manual-video-quality-selection.mdx

@@ -15,11 +15,7 @@ In this article we'll build a UI control for manual video quality selection.
 
 ## Prerequisites
 
-If you haven't
-already bootstrapped a video calling application (our
-[Video Calling Tutorial](https://getstream.io/video/sdk/react/tutorial/video-calling/)
-is a great place to start!), here's a very simple application that we'll use as
-a starting point:
+If you haven't already bootstrapped a video calling application (our [Video Calling Tutorial](https://getstream.io/video/sdk/react/tutorial/video-calling/) is a great place to start!), here's a very simple application that we'll use as a starting point:
 
 ```jsx
 import {

sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx

@@ -149,6 +149,10 @@ export const SettingsTabModalMenu = (props: {
           title={t('Select a Speaker')}
         />
         <IncomingVideoSettingsDropdown title={t('Incoming video quality')} />
+        <div className="rd__tab-panel__note">
+          Actual incoming video quality depends on a number of factors, such as
+          the quality of the source video, and network conditions.
+        </div>
       </TabWrapper>
       <TabWrapper icon="video-effects" label="Effects" inMeeting>
         <VideoEffectsSettings />

sample-apps/react/react-dogfood/style/SettingsTabModal.scss

@@ -61,6 +61,12 @@
     margin-right: auto;
   }
 
+  &__tab-panel__note {
+    font-size: 13px;
+    color: var(--str-video__text-color2);
+    padding: 0 var(--str-video__spacing-lg);
+  }
+
   &__tab-panel__close {
     background-color: unset;
   }