From 2e6d06091d89728e55bc3b11d5a8d5ce3476ac1b Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Mon, 6 Nov 2023 14:43:54 +0200
Subject: [PATCH] feat: snapshots

---
 .../Menu/__snapshots__/Menu.stories.storyshot | 568 ++++++++++--------
 .../__snapshots__/TopAppBar.stories.storyshot | 296 +++++----
 .../__snapshots__/TopAppBar.test.tsx.snap     | 154 +++--
 3 files changed, 569 insertions(+), 449 deletions(-)

diff --git a/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/components/Menu/__snapshots__/Menu.stories.storyshot
index 0db86e5e0..fc124ca65 100644
--- a/src/components/Menu/__snapshots__/Menu.stories.storyshot
+++ b/src/components/Menu/__snapshots__/Menu.stories.storyshot
@@ -31,8 +31,15 @@ exports[`Storyshots Original Components/Menu Disabled Menu 1`] = `
 }
 
 .emotion-3 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-3 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-4 {
@@ -181,43 +188,45 @@ exports[`Storyshots Original Components/Menu Disabled Menu 1`] = `
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={true}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={true}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
-                    TC
-                  </div>
-                  <span>
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      TC
+                    </div>
                     <span>
-                      Tom Cruise
+                      <span>
+                        Tom Cruise
+                      </span>
                     </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
                     <span
-                      className="emotion-9"
-                    />
+                      className="emotion-8"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-9"
+                      />
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -258,8 +267,15 @@ exports[`Storyshots Original Components/Menu Menu with avatar and different butt
 }
 
 .emotion-3 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-3 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-4 {
@@ -418,43 +434,45 @@ exports[`Storyshots Original Components/Menu Menu with avatar and different butt
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
-                    TC
-                  </div>
-                  <span>
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      TC
+                    </div>
                     <span>
-                      Tom Cruise
+                      <span>
+                        Tom Cruise
+                      </span>
                     </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
                     <span
-                      className="emotion-9"
-                    />
+                      className="emotion-8"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-9"
+                      />
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -467,45 +485,47 @@ exports[`Storyshots Original Components/Menu Menu with avatar and different butt
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
-                    <img
-                      src="https://mui.com/static/images/avatar/1.jpg"
-                    />
-                  </div>
-                  <span>
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <img
+                        src="https://mui.com/static/images/avatar/1.jpg"
+                      />
+                    </div>
                     <span>
-                      Tom Cruise
+                      <span>
+                        Tom Cruise
+                      </span>
                     </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
                     <span
-                      className="emotion-9"
-                    />
+                      className="emotion-8"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-9"
+                      />
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -518,50 +538,52 @@ exports[`Storyshots Original Components/Menu Menu with avatar and different butt
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <span
+                        className="emotion-8"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-23"
+                        />
+                      </span>
+                    </div>
+                    <span>
+                      <span>
+                        Tom Cruise
+                      </span>
+                    </span>
                     <span
                       className="emotion-8"
                       onClick={[Function]}
                     >
                       <span
-                        className="emotion-23"
+                        className="emotion-9"
                       />
                     </span>
-                  </div>
-                  <span>
-                    <span>
-                      Tom Cruise
-                    </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="emotion-9"
-                    />
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -574,50 +596,52 @@ exports[`Storyshots Original Components/Menu Menu with avatar and different butt
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <span
+                        className="emotion-8"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-23"
+                        />
+                      </span>
+                    </div>
+                    <span>
+                      <span>
+                        Tom Cruise
+                      </span>
+                    </span>
                     <span
                       className="emotion-8"
                       onClick={[Function]}
                     >
                       <span
-                        className="emotion-23"
+                        className="emotion-9"
                       />
                     </span>
-                  </div>
-                  <span>
-                    <span>
-                      Tom Cruise
-                    </span>
                   </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="emotion-9"
-                    />
-                  </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -658,8 +682,15 @@ exports[`Storyshots Original Components/Menu Menu with option icon and different
 }
 
 .emotion-3 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-3 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-4 {
@@ -818,50 +849,52 @@ exports[`Storyshots Original Components/Menu Menu with option icon and different
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <span
+                        className="emotion-8"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-9"
+                        />
+                      </span>
+                    </div>
+                    <span>
+                      <span>
+                        More
+                      </span>
+                    </span>
                     <span
                       className="emotion-8"
                       onClick={[Function]}
                     >
                       <span
-                        className="emotion-9"
+                        className="emotion-11"
                       />
                     </span>
-                  </div>
-                  <span>
-                    <span>
-                      More
-                    </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="emotion-11"
-                    />
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -874,50 +907,52 @@ exports[`Storyshots Original Components/Menu Menu with option icon and different
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <span
+                        className="emotion-8"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-9"
+                        />
+                      </span>
+                    </div>
+                    <span>
+                      <span>
+                        More
+                      </span>
+                    </span>
                     <span
                       className="emotion-8"
                       onClick={[Function]}
                     >
                       <span
-                        className="emotion-9"
+                        className="emotion-11"
                       />
                     </span>
-                  </div>
-                  <span>
-                    <span>
-                      More
-                    </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="emotion-11"
-                    />
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -930,50 +965,52 @@ exports[`Storyshots Original Components/Menu Menu with option icon and different
         }
       >
         <div>
-          <div
-            className="emotion-3"
-          >
+          <div>
             <div
-              className="emotion-4"
+              className="emotion-3"
             >
-              <button
-                className="emotion-5"
-                data-testid="button"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="emotion-4"
               >
-                <span
-                  className="emotion-6"
+                <button
+                  className="emotion-5"
+                  data-testid="button"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <div
-                    className="emotion-7"
-                    data-testid="_avatar"
+                  <span
+                    className="emotion-6"
                   >
+                    <div
+                      className="emotion-7"
+                      data-testid="_avatar"
+                    >
+                      <span
+                        className="emotion-8"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-9"
+                        />
+                      </span>
+                    </div>
+                    <span>
+                      <span>
+                        More
+                      </span>
+                    </span>
                     <span
                       className="emotion-8"
                       onClick={[Function]}
                     >
                       <span
-                        className="emotion-9"
+                        className="emotion-11"
                       />
                     </span>
-                  </div>
-                  <span>
-                    <span>
-                      More
-                    </span>
-                  </span>
-                  <span
-                    className="emotion-8"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="emotion-11"
-                    />
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -1000,8 +1037,15 @@ exports[`Storyshots Original Components/Menu Menu with selection handler 1`] = `
 }
 
 .emotion-2 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-2 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-3 {
@@ -1075,29 +1119,31 @@ exports[`Storyshots Original Components/Menu Menu with selection handler 1`] = `
         </b>
       </div>
       <div>
-        <div
-          className="emotion-2"
-        >
+        <div>
           <div
-            className="emotion-3"
+            className="emotion-2"
           >
-            <button
-              className="emotion-4"
-              data-testid="button"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
+            <div
+              className="emotion-3"
             >
-              <span
-                className="emotion-5"
+              <button
+                className="emotion-4"
+                data-testid="button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
               >
-                <span>
+                <span
+                  className="emotion-5"
+                >
                   <span>
-                    More
+                    <span>
+                      More
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot b/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot
index bbe807e27..06b2bbbbb 100644
--- a/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot
+++ b/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot
@@ -212,8 +212,15 @@ exports[`Storyshots Original Components/TopNavBar playground 1`] = `
 }
 
 .emotion-11 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-11 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-12 {
@@ -389,49 +396,52 @@ exports[`Storyshots Original Components/TopNavBar playground 1`] = `
         >
           <div>
             <div
-              className="emotion-11"
               data-testid="userMenu"
             >
               <div
-                className="emotion-12"
+                className="emotion-11"
               >
-                <button
-                  className="emotion-13"
-                  data-testid="button"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="emotion-12"
                 >
-                  <span
-                    className="emotion-14"
+                  <button
+                    className="emotion-13"
+                    data-testid="button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <div
-                      className="emotion-15"
-                      data-testid="_avatar"
+                    <span
+                      className="emotion-14"
                     >
-                      <img
-                        src="https://mui.com/static/images/avatar/1.jpg"
-                      />
-                    </div>
-                    <span>
+                      <div
+                        className="emotion-15"
+                        data-testid="_avatar"
+                      >
+                        <img
+                          src="https://mui.com/static/images/avatar/1.jpg"
+                        />
+                      </div>
                       <span>
-                        <span
-                          className="emotion-16"
-                        >
-                          Tom Cruise
+                        <span>
+                          <span
+                            className="emotion-16"
+                          >
+                            Tom Cruise
+                          </span>
                         </span>
                       </span>
-                    </span>
-                    <span
-                      className="emotion-5"
-                      onClick={[Function]}
-                    >
                       <span
-                        className="emotion-18"
-                      />
+                        className="emotion-5"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-18"
+                        />
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -835,8 +845,15 @@ exports[`Storyshots Original Components/TopNavBar with Additional Tools 1`] = `
 }
 
 .emotion-26 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-26 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-27 {
@@ -1109,49 +1126,52 @@ exports[`Storyshots Original Components/TopNavBar with Additional Tools 1`] = `
         >
           <div>
             <div
-              className="emotion-26"
               data-testid="userMenu"
             >
               <div
-                className="emotion-27"
+                className="emotion-26"
               >
-                <button
-                  className="emotion-28"
-                  data-testid="button"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="emotion-27"
                 >
-                  <span
-                    className="emotion-29"
+                  <button
+                    className="emotion-28"
+                    data-testid="button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <div
-                      className="emotion-30"
-                      data-testid="_avatar"
+                    <span
+                      className="emotion-29"
                     >
-                      <img
-                        src="https://mui.com/static/images/avatar/1.jpg"
-                      />
-                    </div>
-                    <span>
+                      <div
+                        className="emotion-30"
+                        data-testid="_avatar"
+                      >
+                        <img
+                          src="https://mui.com/static/images/avatar/1.jpg"
+                        />
+                      </div>
                       <span>
-                        <span
-                          className="emotion-31"
-                        >
-                          Tom Cruise
+                        <span>
+                          <span
+                            className="emotion-31"
+                          >
+                            Tom Cruise
+                          </span>
                         </span>
                       </span>
-                    </span>
-                    <span
-                      className="emotion-5"
-                      onClick={[Function]}
-                    >
                       <span
-                        className="emotion-33"
-                      />
+                        className="emotion-5"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-33"
+                        />
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1374,8 +1394,15 @@ exports[`Storyshots Original Components/TopNavBar with Dark theme enabled 1`] =
 }
 
 .emotion-11 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-11 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-12 {
@@ -1551,49 +1578,52 @@ exports[`Storyshots Original Components/TopNavBar with Dark theme enabled 1`] =
         >
           <div>
             <div
-              className="emotion-11"
               data-testid="userMenu"
             >
               <div
-                className="emotion-12"
+                className="emotion-11"
               >
-                <button
-                  className="emotion-13"
-                  data-testid="button"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="emotion-12"
                 >
-                  <span
-                    className="emotion-14"
+                  <button
+                    className="emotion-13"
+                    data-testid="button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <div
-                      className="emotion-15"
-                      data-testid="_avatar"
+                    <span
+                      className="emotion-14"
                     >
-                      <img
-                        src="https://mui.com/static/images/avatar/1.jpg"
-                      />
-                    </div>
-                    <span>
+                      <div
+                        className="emotion-15"
+                        data-testid="_avatar"
+                      >
+                        <img
+                          src="https://mui.com/static/images/avatar/1.jpg"
+                        />
+                      </div>
                       <span>
-                        <span
-                          className="emotion-16"
-                        >
-                          Tom Cruise
+                        <span>
+                          <span
+                            className="emotion-16"
+                          >
+                            Tom Cruise
+                          </span>
                         </span>
                       </span>
-                    </span>
-                    <span
-                      className="emotion-5"
-                      onClick={[Function]}
-                    >
                       <span
-                        className="emotion-18"
-                      />
+                        className="emotion-5"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-18"
+                        />
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1816,8 +1846,15 @@ exports[`Storyshots Original Components/TopNavBar with Logo Placeholder 1`] = `
 }
 
 .emotion-11 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-11 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-12 {
@@ -1993,49 +2030,52 @@ exports[`Storyshots Original Components/TopNavBar with Logo Placeholder 1`] = `
         >
           <div>
             <div
-              className="emotion-11"
               data-testid="userMenu"
             >
               <div
-                className="emotion-12"
+                className="emotion-11"
               >
-                <button
-                  className="emotion-13"
-                  data-testid="button"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="emotion-12"
                 >
-                  <span
-                    className="emotion-14"
+                  <button
+                    className="emotion-13"
+                    data-testid="button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <div
-                      className="emotion-15"
-                      data-testid="_avatar"
+                    <span
+                      className="emotion-14"
                     >
-                      <img
-                        src="https://mui.com/static/images/avatar/1.jpg"
-                      />
-                    </div>
-                    <span>
+                      <div
+                        className="emotion-15"
+                        data-testid="_avatar"
+                      >
+                        <img
+                          src="https://mui.com/static/images/avatar/1.jpg"
+                        />
+                      </div>
                       <span>
-                        <span
-                          className="emotion-16"
-                        >
-                          Tom Cruise
+                        <span>
+                          <span
+                            className="emotion-16"
+                          >
+                            Tom Cruise
+                          </span>
                         </span>
                       </span>
-                    </span>
-                    <span
-                      className="emotion-5"
-                      onClick={[Function]}
-                    >
                       <span
-                        className="emotion-18"
-                      />
+                        className="emotion-5"
+                        onClick={[Function]}
+                      >
+                        <span
+                          className="emotion-18"
+                        />
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap b/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap
index f3ee024f2..9ee0d53bf 100644
--- a/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap
+++ b/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap
@@ -166,8 +166,15 @@ exports[`TopAppBar should render correctly 1`] = `
 }
 
 .emotion-6 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-6 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-7 {
@@ -468,8 +475,15 @@ exports[`TopAppBar should render correctly 1`] = `
 }
 
 .emotion-6 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-6 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-7 {
@@ -635,46 +649,49 @@ exports[`TopAppBar should render correctly 1`] = `
     >
       <div>
         <div
-          class="emotion-6"
           data-testid="userMenu"
         >
           <div
-            class="emotion-7"
+            class="emotion-6"
           >
-            <button
-              class="emotion-8"
-              data-testid="button"
-              type="button"
+            <div
+              class="emotion-7"
             >
-              <span
-                class="emotion-9"
+              <button
+                class="emotion-8"
+                data-testid="button"
+                type="button"
               >
-                <div
-                  class="emotion-10"
-                  data-testid="_avatar"
+                <span
+                  class="emotion-9"
                 >
-                  <img
-                    src="https://mui.com/static/images/avatar/1.jpg"
-                  />
-                </div>
-                <span>
+                  <div
+                    class="emotion-10"
+                    data-testid="_avatar"
+                  >
+                    <img
+                      src="https://mui.com/static/images/avatar/1.jpg"
+                    />
+                  </div>
                   <span>
-                    <span
-                      class="emotion-11"
-                    >
-                      Tom Cruise
+                    <span>
+                      <span
+                        class="emotion-11"
+                      >
+                        Tom Cruise
+                      </span>
                     </span>
                   </span>
-                </span>
-                <span
-                  class="emotion-12"
-                >
                   <span
-                    class="emotion-13"
-                  />
+                    class="emotion-12"
+                  >
+                    <span
+                      class="emotion-13"
+                    />
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -849,8 +866,15 @@ exports[`TopAppBar should render correctly on dark 1`] = `
 }
 
 .emotion-6 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-6 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-7 {
@@ -1151,8 +1175,15 @@ exports[`TopAppBar should render correctly on dark 1`] = `
 }
 
 .emotion-6 {
+  overflow: inherit;
+  text-overflow: inherit;
+  width: 100%;
+  height: inherit;
   position: relative;
-  display: inline-block;
+}
+
+.emotion-6 #unique-tooltip-id {
+  display: none!important;
 }
 
 .emotion-7 {
@@ -1318,46 +1349,49 @@ exports[`TopAppBar should render correctly on dark 1`] = `
     >
       <div>
         <div
-          class="emotion-6"
           data-testid="userMenu"
         >
           <div
-            class="emotion-7"
+            class="emotion-6"
           >
-            <button
-              class="emotion-8"
-              data-testid="button"
-              type="button"
+            <div
+              class="emotion-7"
             >
-              <span
-                class="emotion-9"
+              <button
+                class="emotion-8"
+                data-testid="button"
+                type="button"
               >
-                <div
-                  class="emotion-10"
-                  data-testid="_avatar"
+                <span
+                  class="emotion-9"
                 >
-                  <img
-                    src="https://mui.com/static/images/avatar/1.jpg"
-                  />
-                </div>
-                <span>
+                  <div
+                    class="emotion-10"
+                    data-testid="_avatar"
+                  >
+                    <img
+                      src="https://mui.com/static/images/avatar/1.jpg"
+                    />
+                  </div>
                   <span>
-                    <span
-                      class="emotion-11"
-                    >
-                      Tom Cruise
+                    <span>
+                      <span
+                        class="emotion-11"
+                      >
+                        Tom Cruise
+                      </span>
                     </span>
                   </span>
-                </span>
-                <span
-                  class="emotion-12"
-                >
                   <span
-                    class="emotion-13"
-                  />
+                    class="emotion-12"
+                  >
+                    <span
+                      class="emotion-13"
+                    />
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>