diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 2313ef2cd5e..665f4a61b7c 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -39,6 +39,11 @@
     &.clickable {
       color: var(--tertiary);
       z-index: z("base");
+
+      .mobile-view & {
+        margin: 0;
+        padding: 1em;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/dialog.scss b/app/assets/stylesheets/common/base/dialog.scss
index fca219bd5f8..2432f91380b 100644
--- a/app/assets/stylesheets/common/base/dialog.scss
+++ b/app/assets/stylesheets/common/base/dialog.scss
@@ -10,6 +10,11 @@
 .dialog-container {
   z-index: z("modal", "dialog");
   display: flex;
+
+  // fixes modal placement on Android when keyboard is visible
+  html.keyboard-visible:not(.ios-device) & {
+    height: calc(100% - env(keyboard-inset-height));
+  }
 }
 
 /**
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 41bee4d6127..8b099536387 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -16,6 +16,12 @@
     .directory-group-selector {
       vertical-align: top;
     }
+
+    @include breakpoint("mobile-large") {
+      .filter-name {
+        width: 100%;
+      }
+    }
   }
 
   .user-info {
@@ -30,16 +36,34 @@
     display: flex;
     justify-content: space-between;
 
+    @include breakpoint("mobile-large") {
+      display: block;
+    }
+
     .total-rows {
       color: var(--primary-medium);
       font-weight: normal;
+
+      @include breakpoint("mobile-large") {
+        display: block;
+      }
     }
   }
 
   .directory-last-updated {
-    margin-bottom: 0.5em;
     color: var(--primary-medium);
     font-size: var(--font-down-1);
+    margin-bottom: 0.5em;
+
+    @include breakpoint("mobile-large") {
+      margin-bottom: 1em;
+    }
+  }
+
+  @include breakpoint("tablet") {
+    .period-chooser .period-chooser-header h2.selected-name {
+      font-size: var(--font-up-1);
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 10fc34d0fd6..2cfce8a9f15 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -1,5 +1,3 @@
-$meta-element-margin: 6px;
-
 .lightbox-wrapper .lightbox {
   position: relative;
   display: inline-block;
@@ -39,6 +37,7 @@ $meta-element-margin: 6px;
 }
 
 .meta {
+  --meta-element-margin: 0.375em;
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -49,29 +48,60 @@ $meta-element-margin: 6px;
   display: flex;
   align-items: center;
 
+  @media (pointer: coarse) {
+    align-items: center;
+    background: var(--secondary);
+    color: var(--primary-high);
+    height: 25px;
+    width: 25px;
+    bottom: 0;
+    right: 0;
+    opacity: 0.8;
+  }
+
   .filename {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
 
     @include ellipsis;
+
+    @media (pointer: coarse) {
+      display: none;
+    }
   }
 
   .d-icon {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
     opacity: 0.8;
     color: var(--secondary);
 
     + .filename {
       margin-left: 0;
     }
+
+    &.d-icon-far-image {
+      @media (pointer: coarse) {
+        display: none;
+      }
+    }
   }
 
   .informations {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
     padding-right: 20px;
     color: var(--secondary-high);
     font-size: var(--font-0);
     flex-shrink: 0;
     flex-grow: 3;
+
+    @media (pointer: coarse) {
+      display: none;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .d-icon-discourse-expand {
+      color: var(--primary-high);
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 2839a6744fd..cc985ce7181 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -1,13 +1,9 @@
-@import "alert";
 @import "compose";
 @import "dashboard";
-@import "dialog";
-@import "directory";
 @import "discourse";
 @import "edit-category";
 @import "header";
 @import "invite-signup";
-@import "lightbox";
 @import "list-controls";
 @import "login-modal";
 @import "login-signup-page";
diff --git a/app/assets/stylesheets/mobile/alert.scss b/app/assets/stylesheets/mobile/alert.scss
deleted file mode 100644
index 90d48b7deb7..00000000000
--- a/app/assets/stylesheets/mobile/alert.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.alert.alert-info {
-  &.clickable {
-    // there are (n) new or updated topics, click to show
-    margin: 0;
-    padding: 1em;
-  }
-}
diff --git a/app/assets/stylesheets/mobile/dialog.scss b/app/assets/stylesheets/mobile/dialog.scss
deleted file mode 100644
index c99fd609767..00000000000
--- a/app/assets/stylesheets/mobile/dialog.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.dialog-container {
-  // fixes modal placement on Android when keyboard is visible
-  html.keyboard-visible:not(.ios-device) & {
-    height: calc(100% - env(keyboard-inset-height));
-  }
-}
diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss
deleted file mode 100644
index c435a13e5af..00000000000
--- a/app/assets/stylesheets/mobile/directory.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.directory {
-  .period-chooser .period-chooser-header h2.selected-name {
-    font-size: var(--font-up-1);
-  }
-
-  &.users-directory {
-    .filter-name {
-      width: 100%;
-    }
-
-    .directory-last-updated {
-      margin-bottom: 1em;
-    }
-  }
-
-  .directory-controls {
-    display: block;
-  }
-
-  .total-rows {
-    color: var(--primary-medium);
-    padding: 5px;
-  }
-}
diff --git a/app/assets/stylesheets/mobile/lightbox.scss b/app/assets/stylesheets/mobile/lightbox.scss
deleted file mode 100644
index b4cd69fa4ca..00000000000
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.lightbox .meta,
-.lightbox:hover .meta {
-  opacity: 0.7;
-  transition: none;
-}
-
-.meta {
-  align-items: center;
-  background: var(--secondary);
-  color: var(--primary-high);
-  height: 25px;
-  width: 25px;
-  bottom: 0;
-  right: 0;
-
-  .filename,
-  .informations,
-  .d-icon-far-image {
-    display: none;
-  }
-
-  .d-icon-discourse-expand {
-    color: var(--primary-high);
-  }
-}