From d8be030b53668d42fa2c38341c559dd61246a7c7 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 30 Nov 2020 15:13:36 +0000
Subject: [PATCH] fixed long links on mobile
---
CHANGELOG.md | 1 +
app/src/components/CardsLayer.vue | 2 ++
app/src/components/ListLayer.vue | 2 ++
app/src/components/OtherCardslayer.vue | 8 ++++++++
4 files changed, 13 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5f7449..cc8df68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ _30th November 2020_
### Fixed
- Add emoji reactions is no longer missing from Cards view.
+- Long URLS now wrap when viewing on smaller screen sizes, to accommodate increased link text.
# 0.1.36
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
index 2d743bb..b1d9fb4 100644
--- a/app/src/components/CardsLayer.vue
+++ b/app/src/components/CardsLayer.vue
@@ -198,6 +198,8 @@ textarea {
@media only screen and (max-width: 600px) {
.readmode >>> a {
font-size: 2em;
+ word-break: break-all;
+ padding-right: 0.5em;
}
}
</style>
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 1c4a259..80287dc 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -190,6 +190,8 @@ textarea {
@media only screen and (max-width: 600px) {
.readmode >>> a {
font-size: 2em;
+ word-break: break-all;
+ padding-right: 0.5em;
}
}
</style>
diff --git a/app/src/components/OtherCardslayer.vue b/app/src/components/OtherCardslayer.vue
index a7940ce..f84d7c9 100644
--- a/app/src/components/OtherCardslayer.vue
+++ b/app/src/components/OtherCardslayer.vue
@@ -247,4 +247,12 @@ input {
background: #ececec;
cursor: pointer;
}
+
+@media only screen and (max-width: 600px) {
+ .readmode >>> a {
+ font-size: 2em;
+ word-break: break-all;
+ padding-right: 0.5em;
+ }
+}
</style>
--
GitLab