From fe71035e6700292b5e6331516f417da8da46bf45 Mon Sep 17 00:00:00 2001
From: Matvei Andrienko <m.y.andrienko@outlook.com>
Date: Tue, 1 Oct 2024 15:18:25 +0200
Subject: [PATCH] fix: add disclaimer

---
 .../06-ui-cookbook/20-manual-video-quality-selection.mdx    | 6 +-----
 .../react-dogfood/components/Settings/SettingsTabModal.tsx  | 4 ++++
 sample-apps/react/react-dogfood/style/SettingsTabModal.scss | 6 ++++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/20-manual-video-quality-selection.mdx b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/20-manual-video-quality-selection.mdx
index b2f524587c..80e18f65cf 100644
--- a/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/20-manual-video-quality-selection.mdx
+++ b/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 {
diff --git a/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx b/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx
index f250b2b132..50ad43551d 100644
--- a/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx
+++ b/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 />
diff --git a/sample-apps/react/react-dogfood/style/SettingsTabModal.scss b/sample-apps/react/react-dogfood/style/SettingsTabModal.scss
index 5f8082bb51..6ce17831b3 100644
--- a/sample-apps/react/react-dogfood/style/SettingsTabModal.scss
+++ b/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;
   }