diff --git a/packages/ui/src/components/ControllerBar.ts b/packages/ui/src/components/ControllerBar.ts
index 4ac38f68..ddc778d3 100644
--- a/packages/ui/src/components/ControllerBar.ts
+++ b/packages/ui/src/components/ControllerBar.ts
@@ -11,7 +11,7 @@ export const controlBar = $.css({
   left: 0,
   right: 0,
   'z-index': 7,
-  padding: '0.5em 1em 0',
+  padding: '0.5em 0.5em 0',
   transition: 'transform 0.3s ease',
   height: 'var(--control-bar-height)',
 
diff --git a/packages/ui/src/components/ControllerBottom.style.ts b/packages/ui/src/components/ControllerBottom.style.ts
index 7a8fbaa5..21717e35 100644
--- a/packages/ui/src/components/ControllerBottom.style.ts
+++ b/packages/ui/src/components/ControllerBottom.style.ts
@@ -4,7 +4,6 @@ import { icon } from '../style'
 export const time = $.css`
   font-variant-numeric: tabular-nums;
   font-size: 0.875em;
-  margin-top: 2px;
 `
 
 export const live = $.css(
@@ -92,7 +91,6 @@ export const textIcon = $.cls('textIcon')
 export const withIcon = $.css({
   display: 'flex',
   'align-items': 'center',
-  margin: '0 -.5em',
 
   [`& > .${icon}:last-child${
     isMobile ? `, & >  .${icon}[aria-label="Play"], & >  .${icon}[aria-label="Pause"]` : ''
diff --git a/packages/ui/src/components/ControllerBottom.ts b/packages/ui/src/components/ControllerBottom.ts
index 66e90e55..e37f6859 100644
--- a/packages/ui/src/components/ControllerBottom.ts
+++ b/packages/ui/src/components/ControllerBottom.ts
@@ -25,7 +25,7 @@ export const controllerBottomWrap = $.css({
   right: 0,
   bottom: 0,
   'z-index': 7,
-  padding: '0 1em',
+  padding: '0 0.5em',
   transition: 'transform 0.3s ease, padding 0.3s ease',
   '&::before': {
     position: 'absolute',