diff --git a/fe1-web/src/App.tsx b/fe1-web/src/App.tsx index 6769f87bc1..8b5422aaed 100644 --- a/fe1-web/src/App.tsx +++ b/fe1-web/src/App.tsx @@ -20,10 +20,14 @@ import { Color } from 'core/styles'; import { configureFeatures } from 'features'; import cameraPolyfill from './core/platform/camera/web-polyfill'; +import wordBreakPolyfill from './core/platform/cssStyle/WordBreakPolyfill'; // load polyfill when the app loads cameraPolyfill(); +// This ensures that long words are broken correctly +wordBreakPolyfill(); + const { messageRegistry, keyPairRegistry, navigationOpts, context } = configureFeatures(); configureKeyPair(); configureNetwork(messageRegistry, keyPairRegistry); diff --git a/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.native.ts b/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.native.ts new file mode 100644 index 0000000000..034d79beb1 --- /dev/null +++ b/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.native.ts @@ -0,0 +1,2 @@ +// Replaces the polyfill +export default () => {}; diff --git a/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.ts b/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.ts new file mode 100644 index 0000000000..841a595b8b --- /dev/null +++ b/fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.ts @@ -0,0 +1,15 @@ +import { Platform } from 'react-native'; + +/** + * This polyfill is required to make sure that long words are broken for chirps + * This is done by adding a css style to the head of the document + */ +export default () => { + if (Platform.OS !== 'web' || typeof 'navigator' === undefined) { + return; + } + + const style = document.createElement('style'); + style.textContent = '* {word-break: break-word;}'; + document.head.append(style); +}; diff --git a/fe1-web/src/features/social/components/ChirpCard.tsx b/fe1-web/src/features/social/components/ChirpCard.tsx index 93332c9f38..528494d693 100644 --- a/fe1-web/src/features/social/components/ChirpCard.tsx +++ b/fe1-web/src/features/social/components/ChirpCard.tsx @@ -111,6 +111,7 @@ const ChirpCard = ({ chirp, isFirstItem, isLastItem }: IPropTypes) => { '👍': !isConnected || !currentUserPopTokenPublicKey, '👎': !isConnected || !currentUserPopTokenPublicKey, '❤️': !isConnected || !currentUserPopTokenPublicKey, + delete: !isConnected || !currentUserPopTokenPublicKey, }; const addReaction = (reaction_codepoint: string) => { requestAddReaction(reaction_codepoint, chirp.id, laoId).catch((err) => { @@ -264,6 +265,7 @@ const ChirpCard = ({ chirp, isFirstItem, isLastItem }: IPropTypes) => { name="delete" testID="delete_chirp" onPress={() => setShowDeleteConfirmation(true)} + disabled={reactionsDisabled.delete} size="small" buttonStyle="secondary" toolbar