From 5ffd0beda94fbae36c7e35a9ae96a5fa7b6e9702 Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Wed, 26 Jun 2024 15:06:05 +0300
Subject: [PATCH] feat: snaps

---
 .../Fields/Select-MultiSelect.snap            | 195 ++++---
 .../Table/Table/Basics-BasicExample.snap      | 183 +++++--
 .../Table/Table/Columns-ColumnChooser.snap    | 183 +++++--
 .../Table/Table/Columns-ColumnWidth.snap      | 209 ++++++--
 .../Table/Table/Columns-Sorting.snap          | 183 +++++--
 .../Table/Table/Header-StickyHeader.snap      | 497 +++++++++++++----
 .../Table/Table/Pagination-Pagination.snap    | 443 ++++++++++-----
 .../Rows and Cells-CellContentAlignment.snap  | 183 +++++--
 .../Table/Rows and Cells-RowDetails.snap      | 271 +++++++---
 .../Table/Rows and Cells-RowSelection.snap    | 507 ++++++++++++++----
 .../Table/Table/Rows and Cells-RowSizes.snap  | 183 +++++--
 .../Table/Table/Showcase-Playground.snap      | 183 +++++--
 .../Updated Components/Tag-ClearableTag.snap  |  29 +-
 .../Updated Components/Tag-Playground.snap    |  15 +-
 .../Updated Components/Tag-ReadOnlyTag.snap   |  78 ++-
 .../Tag-ReadOnlyTagWithIcon.snap              | 102 +++-
 .../Updated Components/Tag-SelectableTag.snap |  40 +-
 .../Updated Components/Tag-TagSizes.snap      | 286 +++++++---
 18 files changed, 2928 insertions(+), 842 deletions(-)

diff --git a/src/__storyshots__/Updated Components/Fields/Select-MultiSelect.snap b/src/__storyshots__/Updated Components/Fields/Select-MultiSelect.snap
index 2d932c925..a3e9ec11c 100644
--- a/src/__storyshots__/Updated Components/Fields/Select-MultiSelect.snap	
+++ b/src/__storyshots__/Updated Components/Fields/Select-MultiSelect.snap	
@@ -156,6 +156,9 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-8:focus-visible {
@@ -167,10 +170,16 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: unset;
 }
 
 .emotion-10 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: unset;
+}
+
+.emotion-11 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -188,12 +197,12 @@
   cursor: pointer;
 }
 
-.emotion-10:hover {
+.emotion-11:hover {
   background: rgba(200,206,255,0.20);
   border-radius: 624.9375rem;
 }
 
-.emotion-11 {
+.emotion-12 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -203,16 +212,16 @@
   cursor: pointer;
 }
 
-.emotion-12 {
+.emotion-13 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-12 path {
+.emotion-13 path {
   fill: #194DCC!important;
 }
 
-.emotion-43 {
+.emotion-49 {
   font-family: Roboto;
   font-weight: 400;
   line-height: 1.25rem;
@@ -234,48 +243,48 @@
   flex: 1 1 0%;
 }
 
-.emotion-43::-webkit-input-placeholder {
+.emotion-49::-webkit-input-placeholder {
   color: transparent;
 }
 
-.emotion-43::-moz-placeholder {
+.emotion-49::-moz-placeholder {
   color: transparent;
 }
 
-.emotion-43:-ms-input-placeholder {
+.emotion-49:-ms-input-placeholder {
   color: transparent;
 }
 
-.emotion-43::placeholder {
+.emotion-49::placeholder {
   color: transparent;
 }
 
-.emotion-43:focus {
+.emotion-49:focus {
   outline: none;
 }
 
-.emotion-43:focus::-webkit-input-placeholder {
+.emotion-49:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.emotion-43:focus::-moz-placeholder {
+.emotion-49:focus::-moz-placeholder {
   color: transparent;
 }
 
-.emotion-43:focus:-ms-input-placeholder {
+.emotion-49:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.emotion-43:focus::placeholder {
+.emotion-49:focus::placeholder {
   color: transparent;
 }
 
-.emotion-43:not(:focus):placeholder-shown+label {
+.emotion-49:not(:focus):placeholder-shown+label {
   font-weight: normal;
 }
 
-.emotion-43:focus-within+label,
-.emotion-43:not(:placeholder-shown)+label {
+.emotion-49:focus-within+label,
+.emotion-49:not(:placeholder-shown)+label {
   font-weight: 700!important;
   -webkit-transform: translate(0.1875rem, -35%) scale(0.8);
   -moz-transform: translate(0.1875rem, -35%) scale(0.8);
@@ -283,24 +292,24 @@
   transform: translate(0.1875rem, -35%) scale(0.8);
 }
 
-.emotion-43:focus-within+label {
+.emotion-49:focus-within+label {
   font-weight: 700!important;
   color: #194DCC;
 }
 
-.emotion-43:disabled {
+.emotion-49:disabled {
   cursor: not-allowed;
 }
 
-.emotion-43:focus+label,
-.emotion-43:not(:placeholder-shown)+label {
+.emotion-49:focus+label,
+.emotion-49:not(:placeholder-shown)+label {
   -webkit-transform: translate(0.1875rem, -82%) scale(0.8);
   -moz-transform: translate(0.1875rem, -82%) scale(0.8);
   -ms-transform: translate(0.1875rem, -82%) scale(0.8);
   transform: translate(0.1875rem, -82%) scale(0.8);
 }
 
-.emotion-44 {
+.emotion-50 {
   -webkit-transition: -webkit-transform 0.25s,opacity 0.25s ease-in-out;
   transition: transform 0.25s,opacity 0.25s ease-in-out;
   transform-origin: 0 0;
@@ -335,7 +344,7 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-45 {
+.emotion-51 {
   position: absolute!important;
   bottom: 0;
   right: 0.5rem;
@@ -350,7 +359,7 @@
   align-items: center;
 }
 
-.emotion-46 {
+.emotion-52 {
   width: 1.25rem;
   height: 1.25rem;
   display: -webkit-box;
@@ -360,8 +369,8 @@
   cursor: pointer;
 }
 
-.emotion-46:hover,
-.emotion-46:focus-visible {
+.emotion-52:hover,
+.emotion-52:focus-visible {
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   border-radius: 100%;
@@ -369,16 +378,16 @@
   box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20);
 }
 
-.emotion-47 {
+.emotion-53 {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.emotion-47 path {
+.emotion-53 path {
   fill: !important;
 }
 
-.emotion-48 {
+.emotion-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -398,7 +407,7 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-48 span {
+.emotion-54 span {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -406,7 +415,7 @@
   padding: 0;
 }
 
-.emotion-52 {
+.emotion-58 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -435,16 +444,16 @@
   min-height: 3.25rem!important;
 }
 
-.emotion-52:hover {
+.emotion-58:hover {
   background-color: rgba(200,206,255,0.20);
 }
 
-.emotion-52:focus-within {
+.emotion-58:focus-within {
   box-shadow: 0 0 0 0.125rem #175BF5;
   background-color: rgba(200,206,255,0.30);
 }
 
-.emotion-52 input:focus label {
+.emotion-58 input:focus label {
   font-weight: 700;
   -webkit-transform: translate(0.1875rem, -82%) scale(0.8)!important;
   -moz-transform: translate(0.1875rem, -82%) scale(0.8)!important;
@@ -453,14 +462,14 @@
   bottom: auto;
 }
 
-.emotion-52 label {
+.emotion-58 label {
   -webkit-transform: translate(0.1875rem, -8px);
   -moz-transform: translate(0.1875rem, -8px);
   -ms-transform: translate(0.1875rem, -8px);
   transform: translate(0.1875rem, -8px);
 }
 
-.emotion-56 {
+.emotion-62 {
   -webkit-transition: -webkit-transform 0.25s,opacity 0.25s ease-in-out;
   transition: transform 0.25s,opacity 0.25s ease-in-out;
   transform-origin: 0 0;
@@ -495,7 +504,7 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-58 {
+.emotion-64 {
   width: 1.25rem;
   height: 1.25rem;
   display: -webkit-box;
@@ -541,22 +550,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Strawberry"
                         >
-                          Strawberry
+                          <div
+                            class="emotion-10"
+                            title="Strawberry"
+                          >
+                            Strawberry
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_0_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -582,22 +595,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Banana"
                         >
-                          Banana
+                          <div
+                            class="emotion-10"
+                            title="Banana"
+                          >
+                            Banana
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_1_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -623,22 +640,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Citrus"
                         >
-                          Citrus
+                          <div
+                            class="emotion-10"
+                            title="Citrus"
+                          >
+                            Citrus
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_2_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -664,22 +685,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Sorbet"
                         >
-                          Sorbet
+                          <div
+                            class="emotion-10"
+                            title="Sorbet"
+                          >
+                            Sorbet
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_3_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -705,22 +730,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Cookie Dough"
                         >
-                          Cookie Dough
+                          <div
+                            class="emotion-10"
+                            title="Cookie Dough"
+                          >
+                            Cookie Dough
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_4_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -746,22 +775,26 @@
                       >
                         <div
                           class="emotion-9"
-                          title="Buttered Pecan"
                         >
-                          Buttered Pecan
+                          <div
+                            class="emotion-10"
+                            title="Buttered Pecan"
+                          >
+                            Buttered Pecan
+                          </div>
                         </div>
                         <div
                           aria-hidden="true"
-                          class="emotion-10"
+                          class="emotion-11"
                           tabindex="-1"
                         >
                           <div
-                            class="emotion-11"
+                            class="emotion-12"
                             data-testid="tag_5_tag_suffix"
                             tabindex="0"
                           >
                             <svg
-                              class="emotion-12"
+                              class="emotion-13"
                               fill="none"
                               viewBox="0 0 20 20"
                               xmlns="http://www.w3.org/2000/svg"
@@ -781,14 +814,14 @@
                       aria-expanded="false"
                       aria-invalid="false"
                       autocomplete="off"
-                      class="emotion-43"
+                      class="emotion-49"
                       data-testid="input_select-input"
                       id="multiTextfield__00"
                       role="combobox"
                       value=""
                     />
                     <label
-                      class="emotion-44"
+                      class="emotion-50"
                       for="multiTextfield__00"
                     >
                       Multi Select
@@ -796,15 +829,15 @@
                     </label>
                   </div>
                   <div
-                    class="emotion-45"
+                    class="emotion-51"
                   >
                     <div
-                      class="emotion-46"
+                      class="emotion-52"
                       data-testid="select-right-icon"
                       tabindex="0"
                     >
                       <svg
-                        class="emotion-47"
+                        class="emotion-53"
                         fill="none"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -819,7 +852,7 @@
                 </div>
               </div>
               <div
-                class="emotion-48"
+                class="emotion-54"
                 data-testid="error-select-input"
               >
                 <span
@@ -845,7 +878,7 @@
           >
             <div>
               <div
-                class="emotion-52"
+                class="emotion-58"
                 data-testid="select-input"
               >
                 <div
@@ -860,7 +893,7 @@
                       aria-expanded="false"
                       aria-invalid="false"
                       autocomplete="off"
-                      class="emotion-43"
+                      class="emotion-49"
                       data-testid="input_select-input"
                       id="multiTextfield__00"
                       placeholder="Multi Select - Async"
@@ -868,7 +901,7 @@
                       value=""
                     />
                     <label
-                      class="emotion-56"
+                      class="emotion-62"
                       for="multiTextfield__00"
                     >
                       Multi Select - Async
@@ -876,14 +909,14 @@
                     </label>
                   </div>
                   <div
-                    class="emotion-45"
+                    class="emotion-51"
                   >
                     <div
-                      class="emotion-58"
+                      class="emotion-64"
                       data-testid="select-right-icon"
                     >
                       <svg
-                        class="emotion-47"
+                        class="emotion-53"
                         fill="none"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -898,7 +931,7 @@
                 </div>
               </div>
               <div
-                class="emotion-48"
+                class="emotion-54"
                 data-testid="error-select-input"
               >
                 <span
diff --git a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap
index 738164725..3cdc5b656 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -67,6 +68,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -99,7 +103,19 @@
   justify-content: flex-start;
 }
 
-.emotion-26 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,6 +146,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -226,7 +251,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -236,7 +265,11 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -246,7 +279,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -259,11 +296,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -278,7 +319,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -288,7 +333,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -298,7 +347,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -311,11 +364,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -330,7 +387,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -340,7 +401,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -350,7 +415,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -363,11 +432,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -382,7 +455,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -392,7 +469,11 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -402,7 +483,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -415,11 +500,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -434,7 +523,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -444,7 +537,11 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -454,7 +551,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -467,11 +568,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -486,7 +591,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -496,7 +605,11 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -506,7 +619,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -519,11 +636,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap
index d66c559f7..8d90a13e6 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap	
@@ -125,6 +125,7 @@
 }
 
 .emotion-8 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -171,6 +172,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-12 {
@@ -203,7 +207,19 @@
   justify-content: flex-start;
 }
 
-.emotion-32 {
+.emotion-26 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,6 +250,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-36 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -360,7 +385,11 @@
             <div
               class="emotion-25"
             >
-              Rachel
+              <span
+                class="emotion-26"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -370,7 +399,11 @@
             <div
               class="emotion-25"
             >
-              Berry
+              <span
+                class="emotion-26"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -380,7 +413,11 @@
             <div
               class="emotion-25"
             >
-              30
+              <span
+                class="emotion-26"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -393,11 +430,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-36"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -412,7 +453,11 @@
             <div
               class="emotion-25"
             >
-              Ross
+              <span
+                class="emotion-26"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -422,7 +467,11 @@
             <div
               class="emotion-25"
             >
-              Geller
+              <span
+                class="emotion-26"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -432,7 +481,11 @@
             <div
               class="emotion-25"
             >
-              32
+              <span
+                class="emotion-26"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -445,11 +498,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-36"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -464,7 +521,11 @@
             <div
               class="emotion-25"
             >
-              Monica
+              <span
+                class="emotion-26"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -474,7 +535,11 @@
             <div
               class="emotion-25"
             >
-              Geller
+              <span
+                class="emotion-26"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -484,7 +549,11 @@
             <div
               class="emotion-25"
             >
-              31
+              <span
+                class="emotion-26"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -497,11 +566,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-36"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -516,7 +589,11 @@
             <div
               class="emotion-25"
             >
-              Chandler
+              <span
+                class="emotion-26"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -526,7 +603,11 @@
             <div
               class="emotion-25"
             >
-              Bing
+              <span
+                class="emotion-26"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -536,7 +617,11 @@
             <div
               class="emotion-25"
             >
-              32
+              <span
+                class="emotion-26"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -549,11 +634,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-36"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -568,7 +657,11 @@
             <div
               class="emotion-25"
             >
-              Joey
+              <span
+                class="emotion-26"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -578,7 +671,11 @@
             <div
               class="emotion-25"
             >
-              Tribbiani
+              <span
+                class="emotion-26"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -588,7 +685,11 @@
             <div
               class="emotion-25"
             >
-              30
+              <span
+                class="emotion-26"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -601,11 +702,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-36"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -620,7 +725,11 @@
             <div
               class="emotion-25"
             >
-              Phoebe
+              <span
+                class="emotion-26"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -630,7 +739,11 @@
             <div
               class="emotion-25"
             >
-              Buffay
+              <span
+                class="emotion-26"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -640,7 +753,11 @@
             <div
               class="emotion-25"
             >
-              31
+              <span
+                class="emotion-26"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -653,11 +770,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-36"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap
index 3d89ab741..f4b28e739 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -67,6 +68,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -128,7 +132,19 @@
   justify-content: flex-start;
 }
 
-.emotion-22 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-24 {
   width: 20%;
   height: 2.75rem;
   padding: 0.5rem 1rem;
@@ -139,7 +155,7 @@
   align-content: center;
 }
 
-.emotion-26 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -170,6 +186,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -266,7 +291,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -276,21 +305,29 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_0_age"
           >
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_0_job"
           >
             <div
@@ -299,11 +336,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -318,7 +359,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -328,21 +373,29 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_1_age"
           >
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_1_job"
           >
             <div
@@ -351,11 +404,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -370,7 +427,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -380,21 +441,29 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_2_age"
           >
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_2_job"
           >
             <div
@@ -403,11 +472,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -422,7 +495,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -432,21 +509,29 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_3_age"
           >
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_3_job"
           >
             <div
@@ -455,11 +540,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -474,7 +563,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -484,21 +577,29 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_4_age"
           >
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_4_job"
           >
             <div
@@ -507,11 +608,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -526,7 +631,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -536,21 +645,29 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_5_age"
           >
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
-            class="emotion-22"
+            class="emotion-24"
             data-testid="ictinus_table_row_5_job"
           >
             <div
@@ -559,11 +676,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap
index 4161b9f9a..db955397e 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -77,6 +78,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -261,7 +265,19 @@
   justify-content: flex-start;
 }
 
-.emotion-44 {
+.emotion-38 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -292,6 +308,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-48 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -520,7 +545,11 @@
             <div
               class="emotion-37"
             >
-              Rachel
+              <span
+                class="emotion-38"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -530,7 +559,11 @@
             <div
               class="emotion-37"
             >
-              Berry
+              <span
+                class="emotion-38"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -540,7 +573,11 @@
             <div
               class="emotion-37"
             >
-              30
+              <span
+                class="emotion-38"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -553,11 +590,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-48"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -572,7 +613,11 @@
             <div
               class="emotion-37"
             >
-              Joey
+              <span
+                class="emotion-38"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -582,7 +627,11 @@
             <div
               class="emotion-37"
             >
-              Tribbiani
+              <span
+                class="emotion-38"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -592,7 +641,11 @@
             <div
               class="emotion-37"
             >
-              30
+              <span
+                class="emotion-38"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -605,11 +658,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-48"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -624,7 +681,11 @@
             <div
               class="emotion-37"
             >
-              Monica
+              <span
+                class="emotion-38"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -634,7 +695,11 @@
             <div
               class="emotion-37"
             >
-              Geller
+              <span
+                class="emotion-38"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -644,7 +709,11 @@
             <div
               class="emotion-37"
             >
-              31
+              <span
+                class="emotion-38"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -657,11 +726,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-48"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -676,7 +749,11 @@
             <div
               class="emotion-37"
             >
-              Phoebe
+              <span
+                class="emotion-38"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -686,7 +763,11 @@
             <div
               class="emotion-37"
             >
-              Buffay
+              <span
+                class="emotion-38"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -696,7 +777,11 @@
             <div
               class="emotion-37"
             >
-              31
+              <span
+                class="emotion-38"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -709,11 +794,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-48"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
@@ -728,7 +817,11 @@
             <div
               class="emotion-37"
             >
-              Ross
+              <span
+                class="emotion-38"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -738,7 +831,11 @@
             <div
               class="emotion-37"
             >
-              Geller
+              <span
+                class="emotion-38"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -748,7 +845,11 @@
             <div
               class="emotion-37"
             >
-              32
+              <span
+                class="emotion-38"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -761,11 +862,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-48"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -780,7 +885,11 @@
             <div
               class="emotion-37"
             >
-              Chandler
+              <span
+                class="emotion-38"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -790,7 +899,11 @@
             <div
               class="emotion-37"
             >
-              Bing
+              <span
+                class="emotion-38"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -800,7 +913,11 @@
             <div
               class="emotion-37"
             >
-              32
+              <span
+                class="emotion-38"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -813,11 +930,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-44"
+                class="emotion-47"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-48"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap b/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap
index 0053c5d3d..0124384ca 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
   display: block;
   width: calc(100%);
@@ -78,6 +79,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -123,7 +127,19 @@
   justify-content: flex-start;
 }
 
-.emotion-26 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -154,6 +170,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -250,7 +275,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -260,7 +289,11 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -270,7 +303,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -283,11 +320,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -302,7 +343,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -312,7 +357,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -322,7 +371,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -335,11 +388,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -354,7 +411,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -364,7 +425,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -374,7 +439,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -387,11 +456,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -406,7 +479,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -416,7 +493,11 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -426,7 +507,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -439,11 +524,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -458,7 +547,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -468,7 +561,11 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -478,7 +575,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -491,11 +592,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -510,7 +615,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -520,7 +629,11 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -530,7 +643,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -543,11 +660,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
@@ -562,7 +683,11 @@
             <div
               class="emotion-19"
             >
-              Gunther
+              <span
+                class="emotion-20"
+              >
+                Gunther
+              </span>
             </div>
           </td>
           <td
@@ -580,7 +705,11 @@
             <div
               class="emotion-19"
             >
-              35
+              <span
+                class="emotion-20"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -593,11 +722,15 @@
               <div
                 aria-label="Central Perk Manager"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Central Perk Manager
+                <div
+                  class="emotion-30"
+                >
+                  Central Perk Manager
+                </div>
               </div>
             </div>
           </td>
@@ -612,7 +745,11 @@
             <div
               class="emotion-19"
             >
-              Janice
+              <span
+                class="emotion-20"
+              >
+                Janice
+              </span>
             </div>
           </td>
           <td
@@ -622,7 +759,11 @@
             <div
               class="emotion-19"
             >
-              Litman-Foralnik
+              <span
+                class="emotion-20"
+              >
+                Litman-Foralnik
+              </span>
             </div>
           </td>
           <td
@@ -632,7 +773,11 @@
             <div
               class="emotion-19"
             >
-              35
+              <span
+                class="emotion-20"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -645,11 +790,15 @@
               <div
                 aria-label="Personal Shopper"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Personal Shopper
+                <div
+                  class="emotion-30"
+                >
+                  Personal Shopper
+                </div>
               </div>
             </div>
           </td>
@@ -664,7 +813,11 @@
             <div
               class="emotion-19"
             >
-              Richard
+              <span
+                class="emotion-20"
+              >
+                Richard
+              </span>
             </div>
           </td>
           <td
@@ -674,7 +827,11 @@
             <div
               class="emotion-19"
             >
-              Burke
+              <span
+                class="emotion-20"
+              >
+                Burke
+              </span>
             </div>
           </td>
           <td
@@ -684,7 +841,11 @@
             <div
               class="emotion-19"
             >
-              50
+              <span
+                class="emotion-20"
+              >
+                50
+              </span>
             </div>
           </td>
           <td
@@ -697,11 +858,15 @@
               <div
                 aria-label="Ophthalmologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Ophthalmologist
+                <div
+                  class="emotion-30"
+                >
+                  Ophthalmologist
+                </div>
               </div>
             </div>
           </td>
@@ -716,7 +881,11 @@
             <div
               class="emotion-19"
             >
-              Estelle
+              <span
+                class="emotion-20"
+              >
+                Estelle
+              </span>
             </div>
           </td>
           <td
@@ -726,7 +895,11 @@
             <div
               class="emotion-19"
             >
-              Leonard
+              <span
+                class="emotion-20"
+              >
+                Leonard
+              </span>
             </div>
           </td>
           <td
@@ -747,11 +920,15 @@
               <div
                 aria-label="Talent Agent"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Talent Agent
+                <div
+                  class="emotion-30"
+                >
+                  Talent Agent
+                </div>
               </div>
             </div>
           </td>
@@ -766,7 +943,11 @@
             <div
               class="emotion-19"
             >
-              Mike
+              <span
+                class="emotion-20"
+              >
+                Mike
+              </span>
             </div>
           </td>
           <td
@@ -776,7 +957,11 @@
             <div
               class="emotion-19"
             >
-              Hannigan
+              <span
+                class="emotion-20"
+              >
+                Hannigan
+              </span>
             </div>
           </td>
           <td
@@ -786,7 +971,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -808,7 +997,11 @@
             <div
               class="emotion-19"
             >
-              Charlie
+              <span
+                class="emotion-20"
+              >
+                Charlie
+              </span>
             </div>
           </td>
           <td
@@ -818,7 +1011,11 @@
             <div
               class="emotion-19"
             >
-              Wheeler
+              <span
+                class="emotion-20"
+              >
+                Wheeler
+              </span>
             </div>
           </td>
           <td
@@ -828,7 +1025,11 @@
             <div
               class="emotion-19"
             >
-              28
+              <span
+                class="emotion-20"
+              >
+                28
+              </span>
             </div>
           </td>
           <td
@@ -841,11 +1042,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -860,7 +1065,11 @@
             <div
               class="emotion-19"
             >
-              Emily
+              <span
+                class="emotion-20"
+              >
+                Emily
+              </span>
             </div>
           </td>
           <td
@@ -870,7 +1079,11 @@
             <div
               class="emotion-19"
             >
-              Waltham
+              <span
+                class="emotion-20"
+              >
+                Waltham
+              </span>
             </div>
           </td>
           <td
@@ -880,7 +1093,11 @@
             <div
               class="emotion-19"
             >
-              28
+              <span
+                class="emotion-20"
+              >
+                28
+              </span>
             </div>
           </td>
           <td
@@ -902,7 +1119,11 @@
             <div
               class="emotion-19"
             >
-              Carol
+              <span
+                class="emotion-20"
+              >
+                Carol
+              </span>
             </div>
           </td>
           <td
@@ -912,7 +1133,11 @@
             <div
               class="emotion-19"
             >
-              Willick
+              <span
+                class="emotion-20"
+              >
+                Willick
+              </span>
             </div>
           </td>
           <td
@@ -922,7 +1147,11 @@
             <div
               class="emotion-19"
             >
-              35
+              <span
+                class="emotion-20"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -944,7 +1173,11 @@
             <div
               class="emotion-19"
             >
-              Frank
+              <span
+                class="emotion-20"
+              >
+                Frank
+              </span>
             </div>
           </td>
           <td
@@ -954,7 +1187,11 @@
             <div
               class="emotion-19"
             >
-              Buffay Jr.
+              <span
+                class="emotion-20"
+              >
+                Buffay Jr.
+              </span>
             </div>
           </td>
           <td
@@ -964,7 +1201,11 @@
             <div
               class="emotion-19"
             >
-              29
+              <span
+                class="emotion-20"
+              >
+                29
+              </span>
             </div>
           </td>
           <td
@@ -986,7 +1227,11 @@
             <div
               class="emotion-19"
             >
-              Barry
+              <span
+                class="emotion-20"
+              >
+                Barry
+              </span>
             </div>
           </td>
           <td
@@ -996,7 +1241,11 @@
             <div
               class="emotion-19"
             >
-              Farber
+              <span
+                class="emotion-20"
+              >
+                Farber
+              </span>
             </div>
           </td>
           <td
@@ -1006,7 +1255,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -1019,11 +1272,15 @@
               <div
                 aria-label="Orthodontist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Orthodontist
+                <div
+                  class="emotion-30"
+                >
+                  Orthodontist
+                </div>
               </div>
             </div>
           </td>
@@ -1038,7 +1295,11 @@
             <div
               class="emotion-19"
             >
-              Mr. Heckles
+              <span
+                class="emotion-20"
+              >
+                Mr. Heckles
+              </span>
             </div>
           </td>
           <td
@@ -1056,7 +1317,11 @@
             <div
               class="emotion-19"
             >
-              60
+              <span
+                class="emotion-20"
+              >
+                60
+              </span>
             </div>
           </td>
           <td
@@ -1069,11 +1334,15 @@
               <div
                 aria-label="Retired"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Retired
+                <div
+                  class="emotion-30"
+                >
+                  Retired
+                </div>
               </div>
             </div>
           </td>
@@ -1088,7 +1357,11 @@
             <div
               class="emotion-19"
             >
-              Tag
+              <span
+                class="emotion-20"
+              >
+                Tag
+              </span>
             </div>
           </td>
           <td
@@ -1098,7 +1371,11 @@
             <div
               class="emotion-19"
             >
-              Jones
+              <span
+                class="emotion-20"
+              >
+                Jones
+              </span>
             </div>
           </td>
           <td
@@ -1108,7 +1385,11 @@
             <div
               class="emotion-19"
             >
-              24
+              <span
+                class="emotion-20"
+              >
+                24
+              </span>
             </div>
           </td>
           <td
@@ -1121,11 +1402,15 @@
               <div
                 aria-label="Assistant"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Assistant
+                <div
+                  class="emotion-30"
+                >
+                  Assistant
+                </div>
               </div>
             </div>
           </td>
@@ -1140,7 +1425,11 @@
             <div
               class="emotion-19"
             >
-              Pete
+              <span
+                class="emotion-20"
+              >
+                Pete
+              </span>
             </div>
           </td>
           <td
@@ -1150,7 +1439,11 @@
             <div
               class="emotion-19"
             >
-              Becker
+              <span
+                class="emotion-20"
+              >
+                Becker
+              </span>
             </div>
           </td>
           <td
@@ -1160,7 +1453,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -1173,11 +1470,15 @@
               <div
                 aria-label="Software Engineer"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Software Engineer
+                <div
+                  class="emotion-30"
+                >
+                  Software Engineer
+                </div>
               </div>
             </div>
           </td>
@@ -1192,7 +1493,11 @@
             <div
               class="emotion-19"
             >
-              Paul
+              <span
+                class="emotion-20"
+              >
+                Paul
+              </span>
             </div>
           </td>
           <td
@@ -1202,7 +1507,11 @@
             <div
               class="emotion-19"
             >
-              Stevens
+              <span
+                class="emotion-20"
+              >
+                Stevens
+              </span>
             </div>
           </td>
           <td
@@ -1212,7 +1521,11 @@
             <div
               class="emotion-19"
             >
-              50
+              <span
+                class="emotion-20"
+              >
+                50
+              </span>
             </div>
           </td>
           <td
@@ -1225,11 +1538,15 @@
               <div
                 aria-label="Lawyer"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Lawyer
+                <div
+                  class="emotion-30"
+                >
+                  Lawyer
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap b/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap
index 9d3316c57..2c2d349b4 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -67,6 +68,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -99,7 +103,19 @@
   justify-content: flex-start;
 }
 
-.emotion-26 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,9 +146,18 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-117 {
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-155 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -147,14 +172,14 @@
   background: #ffffff;
   height: 2.75rem;
   width: 100%;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 1rem;
   box-sizing: border-box;
   border-top: 0.0625rem solid rgba(200,206,255,0.70);
   border-bottom-left-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
 
-.emotion-118 {
+.emotion-156 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -166,12 +191,12 @@
   gap: 0.5rem;
 }
 
-.emotion-119 {
+.emotion-157 {
   position: relative;
   min-width: 8.75rem;
 }
 
-.emotion-120 {
+.emotion-158 {
   overflow: inherit;
   text-overflow: inherit;
   width: 100%;
@@ -179,11 +204,11 @@
   position: relative;
 }
 
-.emotion-120 #unique-tooltip-id {
+.emotion-158 #unique-tooltip-id {
   display: none!important;
 }
 
-.emotion-121 {
+.emotion-159 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -211,16 +236,16 @@
   background-color: rgba(200,206,255,0.30);
 }
 
-.emotion-121:hover {
+.emotion-159:hover {
   background-color: rgba(200,206,255,0.20);
 }
 
-.emotion-121:focus-within {
+.emotion-159:focus-within {
   box-shadow: 0 0 0 0.125rem #175BF5;
   background-color: rgba(200,206,255,0.30);
 }
 
-.emotion-122 {
+.emotion-160 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -240,11 +265,11 @@
   padding: 0rem 0rem 0rem 0.75rem;
 }
 
-.emotion-122>div {
+.emotion-160>div {
   position: relative;
 }
 
-.emotion-123 {
+.emotion-161 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -254,7 +279,7 @@
   flex: 1;
 }
 
-.emotion-124 {
+.emotion-162 {
   font-family: Roboto;
   font-weight: 400;
   line-height: 1rem;
@@ -272,61 +297,61 @@
   min-width: 100%;
 }
 
-.emotion-124::-webkit-input-placeholder {
+.emotion-162::-webkit-input-placeholder {
   color: transparent;
 }
 
-.emotion-124::-moz-placeholder {
+.emotion-162::-moz-placeholder {
   color: transparent;
 }
 
-.emotion-124:-ms-input-placeholder {
+.emotion-162:-ms-input-placeholder {
   color: transparent;
 }
 
-.emotion-124::placeholder {
+.emotion-162::placeholder {
   color: transparent;
 }
 
-.emotion-124:focus {
+.emotion-162:focus {
   outline: none;
 }
 
-.emotion-124:focus::-webkit-input-placeholder {
+.emotion-162:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.emotion-124:focus::-moz-placeholder {
+.emotion-162:focus::-moz-placeholder {
   color: transparent;
 }
 
-.emotion-124:focus:-ms-input-placeholder {
+.emotion-162:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.emotion-124:focus::placeholder {
+.emotion-162:focus::placeholder {
   color: transparent;
 }
 
-.emotion-124:not(:focus):placeholder-shown+label {
+.emotion-162:not(:focus):placeholder-shown+label {
   font-weight: normal;
 }
 
-.emotion-124:focus-within+label,
-.emotion-124:not(:placeholder-shown)+label {
+.emotion-162:focus-within+label,
+.emotion-162:not(:placeholder-shown)+label {
   display: none;
 }
 
-.emotion-124:focus-within+label {
+.emotion-162:focus-within+label {
   font-weight: 700!important;
   color: #194DCC;
 }
 
-.emotion-124:disabled {
+.emotion-162:disabled {
   cursor: not-allowed;
 }
 
-.emotion-125 {
+.emotion-163 {
   -webkit-transition: -webkit-transform 0.25s,opacity 0.25s ease-in-out;
   transition: transform 0.25s,opacity 0.25s ease-in-out;
   transform-origin: 0 0;
@@ -361,7 +386,7 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-126 {
+.emotion-164 {
   min-width: 1.75rem;
   overflow: visible;
   display: -webkit-box;
@@ -379,7 +404,7 @@
   cursor: unset;
 }
 
-.emotion-127 {
+.emotion-165 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -397,7 +422,7 @@
   transition: all 0.2s ease-in-out;
 }
 
-.emotion-128 {
+.emotion-166 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -407,16 +432,16 @@
   cursor: pointer;
 }
 
-.emotion-129 {
+.emotion-167 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-129 path {
+.emotion-167 path {
   fill: #52567a!important;
 }
 
-.emotion-130 {
+.emotion-168 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -428,7 +453,7 @@
   gap: 2rem;
 }
 
-.emotion-131 {
+.emotion-169 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -436,7 +461,7 @@
   gap: 0.25rem;
 }
 
-.emotion-132 {
+.emotion-170 {
   font-family: Roboto;
   font-weight: 400;
   line-height: 1rem;
@@ -445,7 +470,7 @@
   color: #52567a;
 }
 
-.emotion-133 {
+.emotion-171 {
   font-family: Roboto;
   font-weight: 500;
   line-height: 1rem;
@@ -454,21 +479,21 @@
   color: #111530;
 }
 
-.emotion-136 {
+.emotion-174 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.emotion-137 {
+.emotion-175 {
   position: relative;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.emotion-138 {
+.emotion-176 {
   font-family: Roboto;
   font-weight: 500;
   line-height: 1rem;
@@ -498,25 +523,25 @@
   transition: background-color,border 150ms linear;
 }
 
-.emotion-138:focus-visible:not(:disabled) {
+.emotion-176:focus-visible:not(:disabled) {
   background-color: rgba(200,206,255,0.20);
 }
 
-.emotion-138:disabled {
+.emotion-176:disabled {
   opacity: 50%;
   cursor: not-allowed;
 }
 
-.emotion-138:hover:not(:disabled) {
+.emotion-176:hover:not(:disabled) {
   background-color: rgba(200,206,255,0.20);
 }
 
-.emotion-138:active:not(:disabled),
-.emotion-138[aria-expanded="true"] {
+.emotion-176:active:not(:disabled),
+.emotion-176[aria-expanded="true"] {
   background-color: rgba(200,206,255,0.30);
 }
 
-.emotion-139 {
+.emotion-177 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -525,12 +550,12 @@
   display: flex;
 }
 
-.emotion-140 {
+.emotion-178 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-140 path {
+.emotion-178 path {
   fill: #194DCC!important;
 }
 
@@ -628,7 +653,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -638,7 +667,11 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -648,7 +681,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -661,11 +698,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -680,7 +721,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -690,7 +735,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -700,7 +749,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -713,11 +766,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -732,7 +789,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -742,7 +803,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -752,7 +817,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -765,11 +834,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -784,7 +857,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -794,7 +871,11 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -804,7 +885,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -817,11 +902,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -836,7 +925,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -846,7 +939,11 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -856,7 +953,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -869,11 +970,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -888,7 +993,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -898,7 +1007,11 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -908,7 +1021,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -921,11 +1038,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
@@ -940,7 +1061,11 @@
             <div
               class="emotion-19"
             >
-              Gunther
+              <span
+                class="emotion-20"
+              >
+                Gunther
+              </span>
             </div>
           </td>
           <td
@@ -958,7 +1083,11 @@
             <div
               class="emotion-19"
             >
-              35
+              <span
+                class="emotion-20"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -971,11 +1100,15 @@
               <div
                 aria-label="Central Perk Manager"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Central Perk Manager
+                <div
+                  class="emotion-30"
+                >
+                  Central Perk Manager
+                </div>
               </div>
             </div>
           </td>
@@ -990,7 +1123,11 @@
             <div
               class="emotion-19"
             >
-              Janice
+              <span
+                class="emotion-20"
+              >
+                Janice
+              </span>
             </div>
           </td>
           <td
@@ -1000,7 +1137,11 @@
             <div
               class="emotion-19"
             >
-              Litman-Foralnik
+              <span
+                class="emotion-20"
+              >
+                Litman-Foralnik
+              </span>
             </div>
           </td>
           <td
@@ -1010,7 +1151,11 @@
             <div
               class="emotion-19"
             >
-              35
+              <span
+                class="emotion-20"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -1023,11 +1168,15 @@
               <div
                 aria-label="Personal Shopper"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Personal Shopper
+                <div
+                  class="emotion-30"
+                >
+                  Personal Shopper
+                </div>
               </div>
             </div>
           </td>
@@ -1042,7 +1191,11 @@
             <div
               class="emotion-19"
             >
-              Richard
+              <span
+                class="emotion-20"
+              >
+                Richard
+              </span>
             </div>
           </td>
           <td
@@ -1052,7 +1205,11 @@
             <div
               class="emotion-19"
             >
-              Burke
+              <span
+                class="emotion-20"
+              >
+                Burke
+              </span>
             </div>
           </td>
           <td
@@ -1062,7 +1219,11 @@
             <div
               class="emotion-19"
             >
-              50
+              <span
+                class="emotion-20"
+              >
+                50
+              </span>
             </div>
           </td>
           <td
@@ -1075,11 +1236,15 @@
               <div
                 aria-label="Ophthalmologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Ophthalmologist
+                <div
+                  class="emotion-30"
+                >
+                  Ophthalmologist
+                </div>
               </div>
             </div>
           </td>
@@ -1094,7 +1259,11 @@
             <div
               class="emotion-19"
             >
-              Estelle
+              <span
+                class="emotion-20"
+              >
+                Estelle
+              </span>
             </div>
           </td>
           <td
@@ -1104,7 +1273,11 @@
             <div
               class="emotion-19"
             >
-              Leonard
+              <span
+                class="emotion-20"
+              >
+                Leonard
+              </span>
             </div>
           </td>
           <td
@@ -1125,11 +1298,15 @@
               <div
                 aria-label="Talent Agent"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Talent Agent
+                <div
+                  class="emotion-30"
+                >
+                  Talent Agent
+                </div>
               </div>
             </div>
           </td>
@@ -1137,35 +1314,35 @@
       </tbody>
     </table>
     <div
-      class="emotion-117"
+      class="emotion-155"
     >
       <div
-        class="emotion-118"
+        class="emotion-156"
       >
         <div>
           <div
-            class="emotion-119"
+            class="emotion-157"
           >
             <div
-              class="emotion-120"
+              class="emotion-158"
             >
               <div>
                 <div
-                  class="emotion-121"
+                  class="emotion-159"
                   data-testid="select-input-ictinus_table_show_items"
                 >
                   <div
-                    class="emotion-122"
+                    class="emotion-160"
                   >
                     <div
-                      class="emotion-123"
+                      class="emotion-161"
                     >
                       <input
                         aria-controls="select__00"
                         aria-expanded="false"
                         aria-invalid="false"
                         autocomplete="off"
-                        class="emotion-124"
+                        class="emotion-162"
                         data-testid="input_select-input-ictinus_table_show_items"
                         id="textfield__00"
                         placeholder=" "
@@ -1174,7 +1351,7 @@
                         value="10 rows per page"
                       />
                       <label
-                        class="emotion-125"
+                        class="emotion-163"
                         for="textfield__00"
                       >
                          
@@ -1182,18 +1359,18 @@
                     </div>
                     <div
                       aria-hidden="false"
-                      class="emotion-126"
+                      class="emotion-164"
                     >
                       <div
-                        class="emotion-127"
+                        class="emotion-165"
                       >
                         <div
-                          class="emotion-128"
+                          class="emotion-166"
                           data-testid="select-right-icon"
                           tabindex="0"
                         >
                           <svg
-                            class="emotion-129"
+                            class="emotion-167"
                             fill="none"
                             viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg"
@@ -1216,53 +1393,53 @@
         </div>
       </div>
       <div
-        class="emotion-130"
+        class="emotion-168"
       >
         <div
-          class="emotion-131"
+          class="emotion-169"
           data-testid="ictinus_table_pages_info"
         >
           <p
-            class="emotion-132"
+            class="emotion-170"
           >
             page
           </p>
           <span
-            class="emotion-133"
+            class="emotion-171"
             data-testid="ictinus_table_current_page"
           >
             1
           </span>
           <p
-            class="emotion-132"
+            class="emotion-170"
           >
             of
           </p>
           <span
-            class="emotion-133"
+            class="emotion-171"
             data-testid="ictinus_table_total_pages"
           >
             2
           </span>
         </div>
         <div
-          class="emotion-136"
+          class="emotion-174"
         >
           <div
-            class="emotion-137"
+            class="emotion-175"
           >
             <button
-              class="emotion-138"
+              class="emotion-176"
               color="#52567a"
               data-testid="ictinus_table_go_to_first_page-icon-button"
               disabled=""
               type="button"
             >
               <div
-                class="emotion-139"
+                class="emotion-177"
               >
                 <svg
-                  class="emotion-140"
+                  class="emotion-178"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -1276,20 +1453,20 @@
             </button>
           </div>
           <div
-            class="emotion-137"
+            class="emotion-175"
           >
             <button
-              class="emotion-138"
+              class="emotion-176"
               color="#52567a"
               data-testid="ictinus_table_go_to_prev_page-icon-button"
               disabled=""
               type="button"
             >
               <div
-                class="emotion-139"
+                class="emotion-177"
               >
                 <svg
-                  class="emotion-140"
+                  class="emotion-178"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -1303,19 +1480,19 @@
             </button>
           </div>
           <div
-            class="emotion-137"
+            class="emotion-175"
           >
             <button
-              class="emotion-138"
+              class="emotion-176"
               color="#52567a"
               data-testid="ictinus_table_go_to_next_page-icon-button"
               type="button"
             >
               <div
-                class="emotion-139"
+                class="emotion-177"
               >
                 <svg
-                  class="emotion-140"
+                  class="emotion-178"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -1329,19 +1506,19 @@
             </button>
           </div>
           <div
-            class="emotion-137"
+            class="emotion-175"
           >
             <button
-              class="emotion-138"
+              class="emotion-176"
               color="#52567a"
               data-testid="ictinus_table_go_to_last_page-icon-button"
               type="button"
             >
               <div
-                class="emotion-139"
+                class="emotion-177"
               >
                 <svg
-                  class="emotion-140"
+                  class="emotion-178"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap
index 738164725..3cdc5b656 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -67,6 +68,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -99,7 +103,19 @@
   justify-content: flex-start;
 }
 
-.emotion-26 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,6 +146,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -226,7 +251,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -236,7 +265,11 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -246,7 +279,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -259,11 +296,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -278,7 +319,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -288,7 +333,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -298,7 +347,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -311,11 +364,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -330,7 +387,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -340,7 +401,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -350,7 +415,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -363,11 +432,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -382,7 +455,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -392,7 +469,11 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -402,7 +483,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -415,11 +500,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -434,7 +523,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -444,7 +537,11 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -454,7 +551,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -467,11 +568,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -486,7 +591,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -496,7 +605,11 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -506,7 +619,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -519,11 +636,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap
index 9b0572266..123ae9bcb 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap	
@@ -55,6 +55,7 @@
 }
 
 .emotion-5 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -101,6 +102,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-9 {
@@ -170,7 +174,19 @@
   justify-content: flex-start;
 }
 
-.emotion-32 {
+.emotion-26 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,9 +217,18 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-36 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-33 {
+.emotion-37 {
   width: 3.25rem;
   height: 2.75rem;
   padding: 0.5rem 1rem;
@@ -214,7 +239,7 @@
   align-content: center;
 }
 
-.emotion-35 {
+.emotion-39 {
   width: 1.25rem;
   height: 1.25rem;
   display: -webkit-box;
@@ -224,8 +249,8 @@
   cursor: pointer;
 }
 
-.emotion-35:hover,
-.emotion-35:focus-visible {
+.emotion-39:hover,
+.emotion-39:focus-visible {
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   border-radius: 100%;
@@ -233,29 +258,29 @@
   box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20);
 }
 
-.emotion-36 {
+.emotion-40 {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.emotion-36 path {
+.emotion-40 path {
   fill: #52567a!important;
 }
 
-.emotion-37 {
+.emotion-41 {
   cursor: pointer;
   background: rgba(200,206,255,0.30);
 }
 
-.emotion-37:hover {
+.emotion-41:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-52 {
+.emotion-60 {
   border-bottom: 0.0625rem solid rgba(200,206,255,0.70);
 }
 
-.emotion-53 {
+.emotion-61 {
   padding: 16px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -267,7 +292,7 @@
   gap: 16px;
 }
 
-.emotion-54 {
+.emotion-62 {
   font-family: Roboto;
   font-weight: 500;
   line-height: 1.375rem;
@@ -276,7 +301,7 @@
   color: #111530;
 }
 
-.emotion-55 {
+.emotion-63 {
   font-family: Roboto;
   font-weight: 400;
   line-height: 1.375rem;
@@ -404,7 +429,11 @@
             <div
               class="emotion-25"
             >
-              Rachel
+              <span
+                class="emotion-26"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -414,7 +443,11 @@
             <div
               class="emotion-25"
             >
-              Berry
+              <span
+                class="emotion-26"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -424,7 +457,11 @@
             <div
               class="emotion-25"
             >
-              30
+              <span
+                class="emotion-26"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -437,28 +474,32 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-36"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_0_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_0"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -475,7 +516,7 @@
           </td>
         </tr>
         <tr
-          class="emotion-37"
+          class="emotion-41"
         >
           <td
             class="emotion-24"
@@ -484,7 +525,11 @@
             <div
               class="emotion-25"
             >
-              Ross
+              <span
+                class="emotion-26"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -494,7 +539,11 @@
             <div
               class="emotion-25"
             >
-              Geller
+              <span
+                class="emotion-26"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -504,7 +553,11 @@
             <div
               class="emotion-25"
             >
-              32
+              <span
+                class="emotion-26"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -517,28 +570,32 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-36"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_1_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_1"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -558,30 +615,30 @@
           class="emotion-6"
         >
           <td
-            class="emotion-52"
+            class="emotion-60"
             colspan="5"
             data-testid="ictinus_table_row_1_details"
           >
             <div
-              class="emotion-53"
+              class="emotion-61"
             >
               <span
-                class="emotion-54"
+                class="emotion-62"
               >
                 Famous Quotes
               </span>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 We were on a break!
               </p>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 Pivot! Pivot! Pivot!
               </p>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 Hi, I’m Ross. I’m divorced, and I have a son.
               </p>
@@ -598,7 +655,11 @@
             <div
               class="emotion-25"
             >
-              Monica
+              <span
+                class="emotion-26"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -608,7 +669,11 @@
             <div
               class="emotion-25"
             >
-              Geller
+              <span
+                class="emotion-26"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -618,7 +683,11 @@
             <div
               class="emotion-25"
             >
-              31
+              <span
+                class="emotion-26"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -631,28 +700,32 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-36"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_2_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_2"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -678,7 +751,11 @@
             <div
               class="emotion-25"
             >
-              Chandler
+              <span
+                class="emotion-26"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -688,7 +765,11 @@
             <div
               class="emotion-25"
             >
-              Bing
+              <span
+                class="emotion-26"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -698,7 +779,11 @@
             <div
               class="emotion-25"
             >
-              32
+              <span
+                class="emotion-26"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -711,28 +796,32 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-36"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_3_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_3"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -749,7 +838,7 @@
           </td>
         </tr>
         <tr
-          class="emotion-37"
+          class="emotion-41"
         >
           <td
             class="emotion-24"
@@ -758,7 +847,11 @@
             <div
               class="emotion-25"
             >
-              Joey
+              <span
+                class="emotion-26"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -768,7 +861,11 @@
             <div
               class="emotion-25"
             >
-              Tribbiani
+              <span
+                class="emotion-26"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -778,7 +875,11 @@
             <div
               class="emotion-25"
             >
-              30
+              <span
+                class="emotion-26"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -791,28 +892,32 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-36"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_4_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_4"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -832,30 +937,30 @@
           class="emotion-6"
         >
           <td
-            class="emotion-52"
+            class="emotion-60"
             colspan="5"
             data-testid="ictinus_table_row_4_details"
           >
             <div
-              class="emotion-53"
+              class="emotion-61"
             >
               <span
-                class="emotion-54"
+                class="emotion-62"
               >
                 Famous Quotes
               </span>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 How you doin'?
               </p>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 Joey doesn’t share food!
               </p>
               <p
-                class="emotion-55"
+                class="emotion-63"
               >
                 It's a moo point. It's like a cow's opinion; it doesn't matter. It's moo.
               </p>
@@ -872,7 +977,11 @@
             <div
               class="emotion-25"
             >
-              Phoebe
+              <span
+                class="emotion-26"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -882,7 +991,11 @@
             <div
               class="emotion-25"
             >
-              Buffay
+              <span
+                class="emotion-26"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -892,7 +1005,11 @@
             <div
               class="emotion-25"
             >
-              31
+              <span
+                class="emotion-26"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -905,28 +1022,32 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-32"
+                class="emotion-35"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-36"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
           <td
-            class="emotion-33"
+            class="emotion-37"
             data-testid="ictinus_table_row_5_details_iconButton"
           >
             <div
               class="emotion-25"
             >
               <div
-                class="emotion-35"
+                class="emotion-39"
                 data-testid="ictinus_table_expand_5"
                 tabindex="0"
               >
                 <svg
-                  class="emotion-36"
+                  class="emotion-40"
                   fill="none"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap
index daf2ab096..c826253a9 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap	
@@ -259,6 +259,7 @@
 }
 
 .emotion-28 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -305,6 +306,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-32 {
@@ -478,7 +482,19 @@
   align-content: center;
 }
 
-.emotion-65 {
+.emotion-59 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -509,14 +525,23 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-69 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-66 {
+.emotion-70 {
   cursor: pointer;
   background: rgba(200,206,255,0.30);
 }
 
-.emotion-66:hover {
+.emotion-70:hover {
   background: rgba(200,206,255,0.20);
 }
 
@@ -858,7 +883,11 @@
             <div
               class="emotion-52"
             >
-              Rachel
+              <span
+                class="emotion-59"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -868,7 +897,11 @@
             <div
               class="emotion-52"
             >
-              Berry
+              <span
+                class="emotion-59"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -878,7 +911,11 @@
             <div
               class="emotion-52"
             >
-              30
+              <span
+                class="emotion-59"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -891,17 +928,21 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-69"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
         </tr>
         <tr
-          class="emotion-66"
+          class="emotion-70"
         >
           <td
             class="emotion-51"
@@ -960,7 +1001,11 @@
             <div
               class="emotion-52"
             >
-              Ross
+              <span
+                class="emotion-59"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -970,7 +1015,11 @@
             <div
               class="emotion-52"
             >
-              Geller
+              <span
+                class="emotion-59"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -980,7 +1029,11 @@
             <div
               class="emotion-52"
             >
-              32
+              <span
+                class="emotion-59"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -993,11 +1046,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-69"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -1060,7 +1117,11 @@
             <div
               class="emotion-52"
             >
-              Monica
+              <span
+                class="emotion-59"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -1070,7 +1131,11 @@
             <div
               class="emotion-52"
             >
-              Geller
+              <span
+                class="emotion-59"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -1080,7 +1145,11 @@
             <div
               class="emotion-52"
             >
-              31
+              <span
+                class="emotion-59"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -1093,11 +1162,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-69"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -1160,7 +1233,11 @@
             <div
               class="emotion-52"
             >
-              Chandler
+              <span
+                class="emotion-59"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -1170,7 +1247,11 @@
             <div
               class="emotion-52"
             >
-              Bing
+              <span
+                class="emotion-59"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -1180,7 +1261,11 @@
             <div
               class="emotion-52"
             >
-              32
+              <span
+                class="emotion-59"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -1193,11 +1278,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-69"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -1260,7 +1349,11 @@
             <div
               class="emotion-52"
             >
-              Joey
+              <span
+                class="emotion-59"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -1270,7 +1363,11 @@
             <div
               class="emotion-52"
             >
-              Tribbiani
+              <span
+                class="emotion-59"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -1280,7 +1377,11 @@
             <div
               class="emotion-52"
             >
-              30
+              <span
+                class="emotion-59"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -1293,17 +1394,21 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-69"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
         </tr>
         <tr
-          class="emotion-66"
+          class="emotion-70"
         >
           <td
             class="emotion-51"
@@ -1362,7 +1467,11 @@
             <div
               class="emotion-52"
             >
-              Phoebe
+              <span
+                class="emotion-59"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -1372,7 +1481,11 @@
             <div
               class="emotion-52"
             >
-              Buffay
+              <span
+                class="emotion-59"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -1382,7 +1495,11 @@
             <div
               class="emotion-52"
             >
-              31
+              <span
+                class="emotion-59"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -1395,11 +1512,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-69"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
@@ -1462,7 +1583,11 @@
             <div
               class="emotion-52"
             >
-              Gunther
+              <span
+                class="emotion-59"
+              >
+                Gunther
+              </span>
             </div>
           </td>
           <td
@@ -1480,7 +1605,11 @@
             <div
               class="emotion-52"
             >
-              35
+              <span
+                class="emotion-59"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -1493,17 +1622,21 @@
               <div
                 aria-label="Central Perk Manager"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Central Perk Manager
+                <div
+                  class="emotion-69"
+                >
+                  Central Perk Manager
+                </div>
               </div>
             </div>
           </td>
         </tr>
         <tr
-          class="emotion-66"
+          class="emotion-70"
         >
           <td
             class="emotion-51"
@@ -1562,7 +1695,11 @@
             <div
               class="emotion-52"
             >
-              Janice
+              <span
+                class="emotion-59"
+              >
+                Janice
+              </span>
             </div>
           </td>
           <td
@@ -1572,7 +1709,11 @@
             <div
               class="emotion-52"
             >
-              Litman-Foralnik
+              <span
+                class="emotion-59"
+              >
+                Litman-Foralnik
+              </span>
             </div>
           </td>
           <td
@@ -1582,7 +1723,11 @@
             <div
               class="emotion-52"
             >
-              35
+              <span
+                class="emotion-59"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -1595,11 +1740,15 @@
               <div
                 aria-label="Personal Shopper"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Personal Shopper
+                <div
+                  class="emotion-69"
+                >
+                  Personal Shopper
+                </div>
               </div>
             </div>
           </td>
@@ -1662,7 +1811,11 @@
             <div
               class="emotion-52"
             >
-              Richard
+              <span
+                class="emotion-59"
+              >
+                Richard
+              </span>
             </div>
           </td>
           <td
@@ -1672,7 +1825,11 @@
             <div
               class="emotion-52"
             >
-              Burke
+              <span
+                class="emotion-59"
+              >
+                Burke
+              </span>
             </div>
           </td>
           <td
@@ -1682,7 +1839,11 @@
             <div
               class="emotion-52"
             >
-              50
+              <span
+                class="emotion-59"
+              >
+                50
+              </span>
             </div>
           </td>
           <td
@@ -1695,11 +1856,15 @@
               <div
                 aria-label="Ophthalmologist"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Ophthalmologist
+                <div
+                  class="emotion-69"
+                >
+                  Ophthalmologist
+                </div>
               </div>
             </div>
           </td>
@@ -1762,7 +1927,11 @@
             <div
               class="emotion-52"
             >
-              Estelle
+              <span
+                class="emotion-59"
+              >
+                Estelle
+              </span>
             </div>
           </td>
           <td
@@ -1772,7 +1941,11 @@
             <div
               class="emotion-52"
             >
-              Leonard
+              <span
+                class="emotion-59"
+              >
+                Leonard
+              </span>
             </div>
           </td>
           <td
@@ -1793,11 +1966,15 @@
               <div
                 aria-label="Talent Agent"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Talent Agent
+                <div
+                  class="emotion-69"
+                >
+                  Talent Agent
+                </div>
               </div>
             </div>
           </td>
@@ -1860,7 +2037,11 @@
             <div
               class="emotion-52"
             >
-              Mike
+              <span
+                class="emotion-59"
+              >
+                Mike
+              </span>
             </div>
           </td>
           <td
@@ -1870,7 +2051,11 @@
             <div
               class="emotion-52"
             >
-              Hannigan
+              <span
+                class="emotion-59"
+              >
+                Hannigan
+              </span>
             </div>
           </td>
           <td
@@ -1880,7 +2065,11 @@
             <div
               class="emotion-52"
             >
-              31
+              <span
+                class="emotion-59"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -1950,7 +2139,11 @@
             <div
               class="emotion-52"
             >
-              Charlie
+              <span
+                class="emotion-59"
+              >
+                Charlie
+              </span>
             </div>
           </td>
           <td
@@ -1960,7 +2153,11 @@
             <div
               class="emotion-52"
             >
-              Wheeler
+              <span
+                class="emotion-59"
+              >
+                Wheeler
+              </span>
             </div>
           </td>
           <td
@@ -1970,7 +2167,11 @@
             <div
               class="emotion-52"
             >
-              28
+              <span
+                class="emotion-59"
+              >
+                28
+              </span>
             </div>
           </td>
           <td
@@ -1983,11 +2184,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-69"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -2050,7 +2255,11 @@
             <div
               class="emotion-52"
             >
-              Emily
+              <span
+                class="emotion-59"
+              >
+                Emily
+              </span>
             </div>
           </td>
           <td
@@ -2060,7 +2269,11 @@
             <div
               class="emotion-52"
             >
-              Waltham
+              <span
+                class="emotion-59"
+              >
+                Waltham
+              </span>
             </div>
           </td>
           <td
@@ -2070,7 +2283,11 @@
             <div
               class="emotion-52"
             >
-              28
+              <span
+                class="emotion-59"
+              >
+                28
+              </span>
             </div>
           </td>
           <td
@@ -2140,7 +2357,11 @@
             <div
               class="emotion-52"
             >
-              Carol
+              <span
+                class="emotion-59"
+              >
+                Carol
+              </span>
             </div>
           </td>
           <td
@@ -2150,7 +2371,11 @@
             <div
               class="emotion-52"
             >
-              Willick
+              <span
+                class="emotion-59"
+              >
+                Willick
+              </span>
             </div>
           </td>
           <td
@@ -2160,7 +2385,11 @@
             <div
               class="emotion-52"
             >
-              35
+              <span
+                class="emotion-59"
+              >
+                35
+              </span>
             </div>
           </td>
           <td
@@ -2230,7 +2459,11 @@
             <div
               class="emotion-52"
             >
-              Frank
+              <span
+                class="emotion-59"
+              >
+                Frank
+              </span>
             </div>
           </td>
           <td
@@ -2240,7 +2473,11 @@
             <div
               class="emotion-52"
             >
-              Buffay Jr.
+              <span
+                class="emotion-59"
+              >
+                Buffay Jr.
+              </span>
             </div>
           </td>
           <td
@@ -2250,7 +2487,11 @@
             <div
               class="emotion-52"
             >
-              29
+              <span
+                class="emotion-59"
+              >
+                29
+              </span>
             </div>
           </td>
           <td
@@ -2320,7 +2561,11 @@
             <div
               class="emotion-52"
             >
-              Barry
+              <span
+                class="emotion-59"
+              >
+                Barry
+              </span>
             </div>
           </td>
           <td
@@ -2330,7 +2575,11 @@
             <div
               class="emotion-52"
             >
-              Farber
+              <span
+                class="emotion-59"
+              >
+                Farber
+              </span>
             </div>
           </td>
           <td
@@ -2340,7 +2589,11 @@
             <div
               class="emotion-52"
             >
-              30
+              <span
+                class="emotion-59"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -2353,11 +2606,15 @@
               <div
                 aria-label="Orthodontist"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Orthodontist
+                <div
+                  class="emotion-69"
+                >
+                  Orthodontist
+                </div>
               </div>
             </div>
           </td>
@@ -2420,7 +2677,11 @@
             <div
               class="emotion-52"
             >
-              Mr. Heckles
+              <span
+                class="emotion-59"
+              >
+                Mr. Heckles
+              </span>
             </div>
           </td>
           <td
@@ -2438,7 +2699,11 @@
             <div
               class="emotion-52"
             >
-              60
+              <span
+                class="emotion-59"
+              >
+                60
+              </span>
             </div>
           </td>
           <td
@@ -2451,11 +2716,15 @@
               <div
                 aria-label="Retired"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Retired
+                <div
+                  class="emotion-69"
+                >
+                  Retired
+                </div>
               </div>
             </div>
           </td>
@@ -2518,7 +2787,11 @@
             <div
               class="emotion-52"
             >
-              Tag
+              <span
+                class="emotion-59"
+              >
+                Tag
+              </span>
             </div>
           </td>
           <td
@@ -2528,7 +2801,11 @@
             <div
               class="emotion-52"
             >
-              Jones
+              <span
+                class="emotion-59"
+              >
+                Jones
+              </span>
             </div>
           </td>
           <td
@@ -2538,7 +2815,11 @@
             <div
               class="emotion-52"
             >
-              24
+              <span
+                class="emotion-59"
+              >
+                24
+              </span>
             </div>
           </td>
           <td
@@ -2551,11 +2832,15 @@
               <div
                 aria-label="Assistant"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Assistant
+                <div
+                  class="emotion-69"
+                >
+                  Assistant
+                </div>
               </div>
             </div>
           </td>
@@ -2618,7 +2903,11 @@
             <div
               class="emotion-52"
             >
-              Pete
+              <span
+                class="emotion-59"
+              >
+                Pete
+              </span>
             </div>
           </td>
           <td
@@ -2628,7 +2917,11 @@
             <div
               class="emotion-52"
             >
-              Becker
+              <span
+                class="emotion-59"
+              >
+                Becker
+              </span>
             </div>
           </td>
           <td
@@ -2638,7 +2931,11 @@
             <div
               class="emotion-52"
             >
-              32
+              <span
+                class="emotion-59"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -2651,11 +2948,15 @@
               <div
                 aria-label="Software Engineer"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Software Engineer
+                <div
+                  class="emotion-69"
+                >
+                  Software Engineer
+                </div>
               </div>
             </div>
           </td>
@@ -2718,7 +3019,11 @@
             <div
               class="emotion-52"
             >
-              Paul
+              <span
+                class="emotion-59"
+              >
+                Paul
+              </span>
             </div>
           </td>
           <td
@@ -2728,7 +3033,11 @@
             <div
               class="emotion-52"
             >
-              Stevens
+              <span
+                class="emotion-59"
+              >
+                Stevens
+              </span>
             </div>
           </td>
           <td
@@ -2738,7 +3047,11 @@
             <div
               class="emotion-52"
             >
-              50
+              <span
+                class="emotion-59"
+              >
+                50
+              </span>
             </div>
           </td>
           <td
@@ -2751,11 +3064,15 @@
               <div
                 aria-label="Lawyer"
                 aria-selected="false"
-                class="emotion-65"
+                class="emotion-68"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Lawyer
+                <div
+                  class="emotion-69"
+                >
+                  Lawyer
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap
index 738164725..3cdc5b656 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap	
@@ -21,6 +21,7 @@
 }
 
 .emotion-2 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -67,6 +68,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-6 {
@@ -99,7 +103,19 @@
   justify-content: flex-start;
 }
 
-.emotion-26 {
+.emotion-20 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,6 +146,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-30 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -226,7 +251,11 @@
             <div
               class="emotion-19"
             >
-              Rachel
+              <span
+                class="emotion-20"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -236,7 +265,11 @@
             <div
               class="emotion-19"
             >
-              Berry
+              <span
+                class="emotion-20"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -246,7 +279,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -259,11 +296,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-30"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -278,7 +319,11 @@
             <div
               class="emotion-19"
             >
-              Ross
+              <span
+                class="emotion-20"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -288,7 +333,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -298,7 +347,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -311,11 +364,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-30"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -330,7 +387,11 @@
             <div
               class="emotion-19"
             >
-              Monica
+              <span
+                class="emotion-20"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -340,7 +401,11 @@
             <div
               class="emotion-19"
             >
-              Geller
+              <span
+                class="emotion-20"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -350,7 +415,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -363,11 +432,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-30"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -382,7 +455,11 @@
             <div
               class="emotion-19"
             >
-              Chandler
+              <span
+                class="emotion-20"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -392,7 +469,11 @@
             <div
               class="emotion-19"
             >
-              Bing
+              <span
+                class="emotion-20"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -402,7 +483,11 @@
             <div
               class="emotion-19"
             >
-              32
+              <span
+                class="emotion-20"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -415,11 +500,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-30"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -434,7 +523,11 @@
             <div
               class="emotion-19"
             >
-              Joey
+              <span
+                class="emotion-20"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -444,7 +537,11 @@
             <div
               class="emotion-19"
             >
-              Tribbiani
+              <span
+                class="emotion-20"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -454,7 +551,11 @@
             <div
               class="emotion-19"
             >
-              30
+              <span
+                class="emotion-20"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -467,11 +568,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-30"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -486,7 +591,11 @@
             <div
               class="emotion-19"
             >
-              Phoebe
+              <span
+                class="emotion-20"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -496,7 +605,11 @@
             <div
               class="emotion-19"
             >
-              Buffay
+              <span
+                class="emotion-20"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -506,7 +619,11 @@
             <div
               class="emotion-19"
             >
-              31
+              <span
+                class="emotion-20"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -519,11 +636,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-26"
+                class="emotion-29"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-30"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap b/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap
index f4ab87439..58c74c353 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap	
@@ -55,6 +55,7 @@
 }
 
 .emotion-5 {
+  position: relative;
   box-shadow: 0 0.0625rem 0 0 rgba(200,206,255,0.70);
 }
 
@@ -101,6 +102,9 @@
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-9 {
@@ -133,7 +137,19 @@
   justify-content: flex-start;
 }
 
-.emotion-29 {
+.emotion-23 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  color: #111530;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,6 +180,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-33 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -270,7 +295,11 @@
             <div
               class="emotion-22"
             >
-              Rachel
+              <span
+                class="emotion-23"
+              >
+                Rachel
+              </span>
             </div>
           </td>
           <td
@@ -280,7 +309,11 @@
             <div
               class="emotion-22"
             >
-              Berry
+              <span
+                class="emotion-23"
+              >
+                Berry
+              </span>
             </div>
           </td>
           <td
@@ -290,7 +323,11 @@
             <div
               class="emotion-22"
             >
-              30
+              <span
+                class="emotion-23"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -303,11 +340,15 @@
               <div
                 aria-label="Fashion Executive"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Fashion Executive
+                <div
+                  class="emotion-33"
+                >
+                  Fashion Executive
+                </div>
               </div>
             </div>
           </td>
@@ -322,7 +363,11 @@
             <div
               class="emotion-22"
             >
-              Ross
+              <span
+                class="emotion-23"
+              >
+                Ross
+              </span>
             </div>
           </td>
           <td
@@ -332,7 +377,11 @@
             <div
               class="emotion-22"
             >
-              Geller
+              <span
+                class="emotion-23"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -342,7 +391,11 @@
             <div
               class="emotion-22"
             >
-              32
+              <span
+                class="emotion-23"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -355,11 +408,15 @@
               <div
                 aria-label="Paleontologist"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Paleontologist
+                <div
+                  class="emotion-33"
+                >
+                  Paleontologist
+                </div>
               </div>
             </div>
           </td>
@@ -374,7 +431,11 @@
             <div
               class="emotion-22"
             >
-              Monica
+              <span
+                class="emotion-23"
+              >
+                Monica
+              </span>
             </div>
           </td>
           <td
@@ -384,7 +445,11 @@
             <div
               class="emotion-22"
             >
-              Geller
+              <span
+                class="emotion-23"
+              >
+                Geller
+              </span>
             </div>
           </td>
           <td
@@ -394,7 +459,11 @@
             <div
               class="emotion-22"
             >
-              31
+              <span
+                class="emotion-23"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -407,11 +476,15 @@
               <div
                 aria-label="Chef"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Chef
+                <div
+                  class="emotion-33"
+                >
+                  Chef
+                </div>
               </div>
             </div>
           </td>
@@ -426,7 +499,11 @@
             <div
               class="emotion-22"
             >
-              Chandler
+              <span
+                class="emotion-23"
+              >
+                Chandler
+              </span>
             </div>
           </td>
           <td
@@ -436,7 +513,11 @@
             <div
               class="emotion-22"
             >
-              Bing
+              <span
+                class="emotion-23"
+              >
+                Bing
+              </span>
             </div>
           </td>
           <td
@@ -446,7 +527,11 @@
             <div
               class="emotion-22"
             >
-              32
+              <span
+                class="emotion-23"
+              >
+                32
+              </span>
             </div>
           </td>
           <td
@@ -459,11 +544,15 @@
               <div
                 aria-label="?"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                ?
+                <div
+                  class="emotion-33"
+                >
+                  ?
+                </div>
               </div>
             </div>
           </td>
@@ -478,7 +567,11 @@
             <div
               class="emotion-22"
             >
-              Joey
+              <span
+                class="emotion-23"
+              >
+                Joey
+              </span>
             </div>
           </td>
           <td
@@ -488,7 +581,11 @@
             <div
               class="emotion-22"
             >
-              Tribbiani
+              <span
+                class="emotion-23"
+              >
+                Tribbiani
+              </span>
             </div>
           </td>
           <td
@@ -498,7 +595,11 @@
             <div
               class="emotion-22"
             >
-              30
+              <span
+                class="emotion-23"
+              >
+                30
+              </span>
             </div>
           </td>
           <td
@@ -511,11 +612,15 @@
               <div
                 aria-label="Actor"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Actor
+                <div
+                  class="emotion-33"
+                >
+                  Actor
+                </div>
               </div>
             </div>
           </td>
@@ -530,7 +635,11 @@
             <div
               class="emotion-22"
             >
-              Phoebe
+              <span
+                class="emotion-23"
+              >
+                Phoebe
+              </span>
             </div>
           </td>
           <td
@@ -540,7 +649,11 @@
             <div
               class="emotion-22"
             >
-              Buffay
+              <span
+                class="emotion-23"
+              >
+                Buffay
+              </span>
             </div>
           </td>
           <td
@@ -550,7 +663,11 @@
             <div
               class="emotion-22"
             >
-              31
+              <span
+                class="emotion-23"
+              >
+                31
+              </span>
             </div>
           </td>
           <td
@@ -563,11 +680,15 @@
               <div
                 aria-label="Massage Therapist"
                 aria-selected="false"
-                class="emotion-29"
+                class="emotion-32"
                 data-testid="undefined_tag_container"
                 tabindex="-1"
               >
-                Massage Therapist
+                <div
+                  class="emotion-33"
+                >
+                  Massage Therapist
+                </div>
               </div>
             </div>
           </td>
diff --git a/src/__storyshots__/Updated Components/Tag-ClearableTag.snap b/src/__storyshots__/Updated Components/Tag-ClearableTag.snap
index b40d8453c..15aa7d827 100644
--- a/src/__storyshots__/Updated Components/Tag-ClearableTag.snap	
+++ b/src/__storyshots__/Updated Components/Tag-ClearableTag.snap	
@@ -29,6 +29,9 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-0:focus-visible {
@@ -37,6 +40,12 @@
 }
 
 .emotion-1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-2 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -54,12 +63,12 @@
   cursor: pointer;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   background: rgba(200,206,255,0.20);
   border-radius: 624.9375rem;
 }
 
-.emotion-2 {
+.emotion-3 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -69,12 +78,12 @@
   cursor: pointer;
 }
 
-.emotion-3 {
+.emotion-4 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-3 path {
+.emotion-4 path {
   fill: #194DCC!important;
 }
 
@@ -86,19 +95,23 @@
     data-testid="undefined_tag_container"
     tabindex="0"
   >
-    Label
     <div
-      aria-hidden="true"
       class="emotion-1"
+    >
+      Label
+    </div>
+    <div
+      aria-hidden="true"
+      class="emotion-2"
       tabindex="-1"
     >
       <div
-        class="emotion-2"
+        class="emotion-3"
         data-testid="undefined_tag_suffix"
         tabindex="0"
       >
         <svg
-          class="emotion-3"
+          class="emotion-4"
           fill="none"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/__storyshots__/Updated Components/Tag-Playground.snap b/src/__storyshots__/Updated Components/Tag-Playground.snap
index 22a0279ea..60a45bdf8 100644
--- a/src/__storyshots__/Updated Components/Tag-Playground.snap	
+++ b/src/__storyshots__/Updated Components/Tag-Playground.snap	
@@ -29,6 +29,15 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -40,7 +49,11 @@
       data-testid="undefined_tag_container"
       tabindex="-1"
     >
-      Label
+      <div
+        class="emotion-1"
+      >
+        Label
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/__storyshots__/Updated Components/Tag-ReadOnlyTag.snap b/src/__storyshots__/Updated Components/Tag-ReadOnlyTag.snap
index 557c689e1..001bacdc3 100644
--- a/src/__storyshots__/Updated Components/Tag-ReadOnlyTag.snap	
+++ b/src/__storyshots__/Updated Components/Tag-ReadOnlyTag.snap	
@@ -43,9 +43,18 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-2 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -76,9 +85,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-3 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,9 +121,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-4 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -142,9 +157,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-5 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,9 +193,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-6 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -208,6 +229,9 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 <div>
@@ -224,7 +248,11 @@
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -233,11 +261,15 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-2"
+        class="emotion-3"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -246,11 +278,15 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-3"
+        class="emotion-5"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -259,11 +295,15 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-4"
+        class="emotion-7"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -272,11 +312,15 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-5"
+        class="emotion-9"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -285,11 +329,15 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-6"
+        class="emotion-11"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/__storyshots__/Updated Components/Tag-ReadOnlyTagWithIcon.snap b/src/__storyshots__/Updated Components/Tag-ReadOnlyTagWithIcon.snap
index 670993408..48132f676 100644
--- a/src/__storyshots__/Updated Components/Tag-ReadOnlyTagWithIcon.snap	
+++ b/src/__storyshots__/Updated Components/Tag-ReadOnlyTagWithIcon.snap	
@@ -43,6 +43,9 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-2 {
@@ -64,6 +67,12 @@
 }
 
 .emotion-4 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -94,9 +103,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-7 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -127,18 +139,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-9 {
+.emotion-11 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-9 path {
+.emotion-11 path {
   fill: #BF1250!important;
 }
 
-.emotion-10 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -169,18 +184,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-12 {
+.emotion-15 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-12 path {
+.emotion-15 path {
   fill: #5F33AC!important;
 }
 
-.emotion-13 {
+.emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -211,18 +229,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-15 {
+.emotion-19 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-15 path {
+.emotion-19 path {
   fill: #11695B!important;
 }
 
-.emotion-16 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -253,14 +274,17 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-18 {
+.emotion-23 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-18 path {
+.emotion-23 path {
   fill: #8B391D!important;
 }
 
@@ -295,7 +319,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -304,7 +332,7 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-4"
+        class="emotion-5"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
@@ -325,7 +353,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -334,7 +366,7 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-7"
+        class="emotion-9"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
@@ -342,7 +374,7 @@
           class="emotion-2"
         >
           <svg
-            class="emotion-9"
+            class="emotion-11"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -355,7 +387,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -364,7 +400,7 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-10"
+        class="emotion-13"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
@@ -372,7 +408,7 @@
           class="emotion-2"
         >
           <svg
-            class="emotion-12"
+            class="emotion-15"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -385,7 +421,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -394,7 +434,7 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-13"
+        class="emotion-17"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
@@ -402,7 +442,7 @@
           class="emotion-2"
         >
           <svg
-            class="emotion-15"
+            class="emotion-19"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -415,7 +455,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -424,7 +468,7 @@
       <div
         aria-label="Label"
         aria-selected="false"
-        class="emotion-16"
+        class="emotion-21"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
@@ -432,7 +476,7 @@
           class="emotion-2"
         >
           <svg
-            class="emotion-18"
+            class="emotion-23"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -445,7 +489,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-4"
+        >
+          Label
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/__storyshots__/Updated Components/Tag-SelectableTag.snap b/src/__storyshots__/Updated Components/Tag-SelectableTag.snap
index a506359bd..4867bb887 100644
--- a/src/__storyshots__/Updated Components/Tag-SelectableTag.snap	
+++ b/src/__storyshots__/Updated Components/Tag-SelectableTag.snap	
@@ -43,6 +43,9 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-1:hover {
@@ -55,6 +58,12 @@
 }
 
 .emotion-2 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -85,18 +94,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-2:focus-visible {
+.emotion-3:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-3 {
+.emotion-4 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -105,12 +117,12 @@
   display: flex;
 }
 
-.emotion-4 {
+.emotion-5 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-4 path {
+.emotion-5 path {
   fill: #194DCC!important;
 }
 
@@ -128,7 +140,11 @@
         data-testid="undefined_tag_container"
         tabindex="0"
       >
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
     <div
@@ -137,16 +153,16 @@
       <div
         aria-label="Label"
         aria-selected="true"
-        class="emotion-2"
+        class="emotion-3"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
         <div
-          class="emotion-3"
+          class="emotion-4"
           data-testid="undefined_tag_prefix"
         >
           <svg
-            class="emotion-4"
+            class="emotion-5"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -157,7 +173,11 @@
             />
           </svg>
         </div>
-        Label
+        <div
+          class="emotion-2"
+        >
+          Label
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/__storyshots__/Updated Components/Tag-TagSizes.snap b/src/__storyshots__/Updated Components/Tag-TagSizes.snap
index cff6e95b4..b1caea6bd 100644
--- a/src/__storyshots__/Updated Components/Tag-TagSizes.snap	
+++ b/src/__storyshots__/Updated Components/Tag-TagSizes.snap	
@@ -52,9 +52,18 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .emotion-4 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -85,9 +94,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-5 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -118,9 +130,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-6 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -151,9 +166,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-7 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -184,9 +202,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-8 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -217,9 +238,12 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-10 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -250,9 +274,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-11 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -283,9 +310,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-12 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -316,9 +346,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-13 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -349,9 +382,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-14 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -382,9 +418,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-15 {
+.emotion-26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -415,9 +454,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-19 {
+.emotion-31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -448,18 +490,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-19:hover {
+.emotion-31:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-19:focus-visible {
+.emotion-31:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-20 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -490,18 +535,21 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-20:hover {
+.emotion-33:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-20:focus-visible {
+.emotion-33:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-21 {
+.emotion-34 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -510,16 +558,16 @@
   display: flex;
 }
 
-.emotion-22 {
+.emotion-35 {
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-22 path {
+.emotion-35 path {
   fill: #194DCC!important;
 }
 
-.emotion-24 {
+.emotion-38 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -550,18 +598,21 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-24:hover {
+.emotion-38:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-24:focus-visible {
+.emotion-38:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-25 {
+.emotion-40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -592,18 +643,21 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-25:hover {
+.emotion-40:hover {
   background: rgba(200,206,255,0.20);
 }
 
-.emotion-25:focus-visible {
+.emotion-40:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-31 {
+.emotion-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -634,14 +688,17 @@
   line-height: 1.25rem;
   font-size: 0.875rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-31:focus-visible {
+.emotion-47:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
 
-.emotion-32 {
+.emotion-49 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -659,12 +716,12 @@
   cursor: pointer;
 }
 
-.emotion-32:hover {
+.emotion-49:hover {
   background: rgba(200,206,255,0.20);
   border-radius: 624.9375rem;
 }
 
-.emotion-33 {
+.emotion-50 {
   width: 1rem;
   height: 1rem;
   display: -webkit-box;
@@ -674,7 +731,7 @@
   cursor: pointer;
 }
 
-.emotion-36 {
+.emotion-53 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -705,9 +762,12 @@
   line-height: 1rem;
   font-size: 0.75rem;
   letter-spacing: 0.015625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.emotion-36:focus-visible {
+.emotion-53:focus-visible {
   background: rgba(200,206,255,0.20);
   border-color: #175BF5;
 }
@@ -739,7 +799,11 @@
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -748,11 +812,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-4"
+        class="emotion-5"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -761,11 +829,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-5"
+        class="emotion-7"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -774,11 +846,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-6"
+        class="emotion-9"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -787,11 +863,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-7"
+        class="emotion-11"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -800,11 +880,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-8"
+        class="emotion-13"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
   </div>
@@ -817,11 +901,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-10"
+        class="emotion-16"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -830,11 +918,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-11"
+        class="emotion-18"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -843,11 +935,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-12"
+        class="emotion-20"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -856,11 +952,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-13"
+        class="emotion-22"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -869,11 +969,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-14"
+        class="emotion-24"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -882,11 +986,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-15"
+        class="emotion-26"
         data-testid="undefined_tag_container"
         tabindex="-1"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
   </div>
@@ -912,11 +1020,15 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-19"
+        class="emotion-31"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
     <div
@@ -925,16 +1037,16 @@
       <div
         aria-label="Normal"
         aria-selected="true"
-        class="emotion-20"
+        class="emotion-33"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
         <div
-          class="emotion-21"
+          class="emotion-34"
           data-testid="undefined_tag_prefix"
         >
           <svg
-            class="emotion-22"
+            class="emotion-35"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -945,7 +1057,11 @@
             />
           </svg>
         </div>
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
       </div>
     </div>
   </div>
@@ -958,11 +1074,15 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-24"
+        class="emotion-38"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
     <div
@@ -971,16 +1091,16 @@
       <div
         aria-label="Small"
         aria-selected="true"
-        class="emotion-25"
+        class="emotion-40"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
         <div
-          class="emotion-21"
+          class="emotion-34"
           data-testid="undefined_tag_prefix"
         >
           <svg
-            class="emotion-22"
+            class="emotion-35"
             fill="none"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -991,7 +1111,11 @@
             />
           </svg>
         </div>
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
       </div>
     </div>
   </div>
@@ -1017,23 +1141,27 @@
       <div
         aria-label="Normal"
         aria-selected="false"
-        class="emotion-31"
+        class="emotion-47"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
-        Normal
+        <div
+          class="emotion-4"
+        >
+          Normal
+        </div>
         <div
           aria-hidden="true"
-          class="emotion-32"
+          class="emotion-49"
           tabindex="-1"
         >
           <div
-            class="emotion-33"
+            class="emotion-50"
             data-testid="undefined_tag_suffix"
             tabindex="0"
           >
             <svg
-              class="emotion-22"
+              class="emotion-35"
               fill="none"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -1057,23 +1185,27 @@
       <div
         aria-label="Small"
         aria-selected="false"
-        class="emotion-36"
+        class="emotion-53"
         data-testid="undefined_tag_container"
         tabindex="0"
       >
-        Small
+        <div
+          class="emotion-4"
+        >
+          Small
+        </div>
         <div
           aria-hidden="true"
-          class="emotion-32"
+          class="emotion-49"
           tabindex="-1"
         >
           <div
-            class="emotion-33"
+            class="emotion-50"
             data-testid="undefined_tag_suffix"
             tabindex="0"
           >
             <svg
-              class="emotion-22"
+              class="emotion-35"
               fill="none"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"