diff --git a/resources/assets/js/components/layout/ModalWrapper.vue b/resources/assets/js/components/layout/ModalWrapper.vue
index 4a11101c..099f832c 100644
--- a/resources/assets/js/components/layout/ModalWrapper.vue
+++ b/resources/assets/js/components/layout/ModalWrapper.vue
@@ -1,8 +1,7 @@
 <template>
   <dialog
     ref="dialog"
-    class="text-k-text-primary border-0 p-0 rounded-md min-w-[calc(100vm_-_24px)] md:min-w-[460px]
-    max-w-[calc(100vw_-_24px)] bg-k-bg-primary overflow-visible backdrop:bg-black/70"
+    class="text-k-text-primary min-w-full md:min-w-[480px] border-0 p-0 rounded-md bg-k-bg-primary overflow-visible backdrop:bg-black/70"
     @cancel.prevent
   >
     <Component :is="modalNameToComponentMap[activeModalName]" v-if="activeModalName" @close="close" />
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
index 3cca0643..864564fa 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="extra-controls flex justify-end relative md:w-[320px] px-8 py-0">
+  <div class="extra-controls flex justify-end relative md:w-[320px] px-6 md:px-8 py-0">
     <div class="flex justify-end items-center gap-6">
       <FooterBtn
         class="visualizer-btn hidden md:!block"
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
index 33f821c1..f5d934ef 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="playback-controls flex flex-1 flex-col place-content-center place-items-center">
-    <div class="flex items-center justify-center gap-5 md:gap-12">
+  <div class="playback-controls flex flex-1 flex-col justify-center">
+    <div class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0">
       <LikeButton v-if="song" :song="song" class="text-base" />
       <button v-else type="button" /> <!-- a placeholder to maintain the asymmetric layout -->
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
index bc33accc..b06a4ad6 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
@@ -116,6 +116,7 @@ nav {
 
   @media screen and (max-width: 768px) {
     @mixin themed-background;
+    z-index: 999;
 
     transform: translateX(-100vw);
     transition: transform .2s ease-in-out;
diff --git a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
index eefe3c42..ce0babde 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="submit" @keydown.esc="maybeClose">
+  <form class="md:w-[420px] min-w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
     <header>
       <h1>New Playlist Folder</h1>
     </header>
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index ef970d27..6936113c 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="min-w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
+  <form class="md:w-[480px] w-full" @submit.prevent="submit" @keydown.esc="maybeClose">
     <header>
       <h1>
         New Playlist
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
index caf9724a..e5d129a6 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="smart-playlist-form w-[560px]">
+  <div class="smart-playlist-form md:w-[560px]">
     <slot />
   </div>
 </template>
diff --git a/resources/assets/js/components/ui/form/FormRow.vue b/resources/assets/js/components/ui/form/FormRow.vue
index c3b1eb56..9f40e3a9 100644
--- a/resources/assets/js/components/ui/form/FormRow.vue
+++ b/resources/assets/js/components/ui/form/FormRow.vue
@@ -25,13 +25,13 @@ const props = withDefaults(defineProps<{ cols?: number }>(), { cols: 1 })
 const columnClass = computed(() => {
   switch (props.cols) {
     case 1:
-      return ''
+      return 'grid-cols-1'
     case 2:
-      return 'grid-cols-2'
+      return 'md:grid-cols-2'
     case 3:
-      return 'grid-cols-3'
+      return 'md:grid-cols-3'
     case 4:
-      return 'grid-cols-4'
+      return 'md:grid-cols-4'
     default:
       throw new Error('Only 1-4 columns are supported')
   }
diff --git a/resources/assets/js/components/ui/form/TextInput.vue b/resources/assets/js/components/ui/form/TextInput.vue
index c9ef82cc..6967aa25 100644
--- a/resources/assets/js/components/ui/form/TextInput.vue
+++ b/resources/assets/js/components/ui/form/TextInput.vue
@@ -2,7 +2,7 @@
   <input
     ref="el"
     v-model="value"
-    class="text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input
+    class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input
     read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900"
     type="text"
   >