Merge pull request #1577 from dedis/work-fe1-dmassonn-fix-long-chirp-…

…overflowing

Fix long chirps being cut off scren

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);

fe1-web/src/core/platform/cssStyle/WordBreakPolyfill.native.ts

@@ -0,0 +1,2 @@
+// Replaces the polyfill
+export default () => {};

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);
+};

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