Fix overflowing focus effect in TabItem (#2295)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

Fixes #2290
([Issue](#2290))

## Summary

Fixes overflowing focus effect by making changes in the stylesheet.

## Details

Removing `overflow:hidden` from `TabItems` component and adding it to
the `TabItem` component that are not currently focused.

### Breaking change? (Yes/No)

 - No

.changeset/khaki-swans-peel.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Fixed a bug where the focus effect of the `TabItem` component was cut off.

packages/bezier-react/src/components/Tabs/Tabs.module.scss

@@ -28,7 +28,6 @@ $tab-item-indicator-height: 3px;
 }
 
 .TabItems {
-  overflow: hidden;
   display: flex;
 }
 
@@ -41,22 +40,22 @@ $tab-item-indicator-height: 3px;
 
     position: absolute;
     right: 1px;
-    bottom: -8px;
+    bottom: calc(-8px + $tab-item-indicator-height);
     left: 1px;
 
-    height: $tab-item-indicator-height;
+    height: 0;
 
     background-color: var(--bgtxt-blue-normal);
     border-radius: math.div($tab-item-indicator-height, 2);
 
-    transition: transform var(--transition-s);
+    transition: height var(--transition-s);
   }
 
   &:where([data-state='active']) {
     color: var(--bgtxt-blue-normal);
 
     &::after {
-      transform: translateY(-#{$tab-item-indicator-height});
+      height: $tab-item-indicator-height;
     }
 
     &:hover {