Always show the drag handle when the device is a touch device

package.json

@@ -21,6 +21,7 @@
     "date-fns": "2.23.0",
     "dompurify": "2.3.0",
     "highlight.js": "11.1.0",
+    "is-touch-device": "^1.0.1",
     "lodash": "4.17.21",
     "marked": "2.1.3",
     "register-service-worker": "1.7.2",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="{'is-touch': isTouch}">
 		<div :class="{'is-hidden': !online}">
 			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
 			<div class="offline" style="height: 0;width: 0;"></div>
@@ -24,6 +24,7 @@
 
 <script>
 import {mapState} from 'vuex'
+import isTouchDevice from 'is-touch-device'
 
 import authTypes from './models/authTypes'
 
@@ -63,12 +64,17 @@ export default {
 			this.$router.push({name: 'home'})
 		}
 	},
-	computed: mapState({
-		authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
-		authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
-		online: ONLINE,
-		keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
-	}),
+	computed: {
+		isTouch() {
+			return isTouchDevice()
+		},
+		...mapState({
+			authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
+			authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
+			online: ONLINE,
+			keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
+		}),
+	},
 	methods: {
 		setupOnlineStatus() {
 			this.$store.commit(ONLINE, navigator.onLine)

src/styles/theme/theme.scss

@@ -153,3 +153,7 @@ button.table {
 .is-strikethrough {
   text-decoration: line-through;
 }
+
+.is-touch .handle {
+	opacity: 1 !important;
+}

yarn.lock

@@ -5013,6 +5013,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
+is-touch-device@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-touch-device/-/is-touch-device-1.0.1.tgz#9a2fd59f689e9a9bf6ae9a86924c4ba805a42eab"
+  integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"