diff --git a/package.json b/package.json
index 419082f..b779cc7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "synchrsub",
-  "version": "0.0.3_b",
+  "version": "0.0.3_b+1",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index 49cf87c..31e3b0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -495,15 +495,20 @@ onBeforeUnmount(() => {
 /* button bar */
 
 .buttonBar {
-  display: inline-block;
-  width: calc(100% - 1.5px - 4rem);
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  width: calc(100% - 2px - 5rem);
+  padding: 0.5rem;
   height: 15%;
   border: 1px solid lightgray;
   margin: 1rem 2rem;
+  overflow-y: auto;
 
-  >button {
-    margin: 1rem;
-    margin-right: 0;
+  >* {
+    display: inline-block;
+    min-width: fit-content;
   }
 
   #multiSelect {
@@ -516,8 +521,8 @@ onBeforeUnmount(() => {
 
   #videoProgress {
     display: flex;
-    width: calc(100% - 2rem);
-    margin: 0 1rem;
+    flex-wrap: wrap;
+    width: 100%;
 
     >input {
       display: inline-block;
@@ -526,12 +531,22 @@ onBeforeUnmount(() => {
 
     >span {
       display: inline-block;
-      width: auto;
       height: 100%;
+      line-height: normal;
       text-align: center;
       margin: auto;
       padding: 0;
     }
+
+    @media (aspect-ratio < 1) {
+      >input {
+        width: 100%;
+      }
+
+      >span {
+        width: 100%;
+      }
+    }
   }
 }