diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
index 418942e71..af59e1f54 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -186,7 +186,7 @@ const ContentListView: FunctionComponent<Props> = ({
       id="items-column"
       className={classNames(
         'sn-component section app-column flex flex-col border-b border-solid border-border ',
-        'xl:w-87.5 xsm-only:!w-full sm-only:!w-full md-only:!w-52 lg-only:!w-52',
+        'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52',
       )}
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 872659836..d79c22bf7 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
+const plugin = require('tailwindcss/plugin')
+
 module.exports = {
   content: ['./src/javascripts/**/*.tsx', '../toast/src/**/*.tsx'],
   theme: {
@@ -129,5 +131,9 @@ module.exports = {
     'text-accessory-tint-5',
     'text-accessory-tint-6',
   ],
-  plugins: [],
+  plugins: [
+    plugin(function ({ addVariant }) {
+      addVariant('pointer-coarse', '@media (pointer: coarse)')
+    }),
+  ],
 }