Show link anchor in share and invite modals

webapp/src/components/filterComponent.scss

@@ -1,4 +1,6 @@
 .FilterComponent {
+	min-width: 430px;
+
     .octo-filterclause {
         display: flex;
         flex-direction: row;

webapp/src/components/modal.scss

@@ -4,7 +4,6 @@
     left: -230px;
     z-index: 10;
 
-	min-width: 430px;
 	box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
 	background-color: rgb(var(--main-bg));
 	padding: 10px;

webapp/src/components/registrationLinkComponent.scss

@@ -19,10 +19,11 @@
         flex-grow: 1;
     }
 
-    input.shareUrl {
+    a.shareUrl {
         flex-grow: 1;
-        border: solid 1px #cccccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-right: 5px;
-        padding: 5px;
     }
 }

webapp/src/components/registrationLinkComponent.tsx

@@ -48,11 +48,17 @@ class RegistrationLinkComponent extends React.PureComponent<Props, State> {
                 <div className='RegistrationLinkComponent'>
                     {workspace && <>
                         <div className='row'>
-                            <input
+                            {intl.formatMessage({id: 'RegistrationLink.description', defaultMessage: 'Share this link for others to create accounts:'})}
+                        </div>
+                        <div className='row'>
+                            <a
                                 className='shareUrl'
-                                readOnly={true}
-                                value={registrationUrl}
-                            />
+                                href={registrationUrl}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                {registrationUrl}
+                            </a>
                             <Button
                                 filled={true}
                                 onClick={() => {

webapp/src/components/shareBoardComponent.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     padding: 5px;
     color: rgb(var(--main-fg));
+	max-width: 400px;
 
     > .row {
         display: flex;
@@ -19,10 +20,11 @@
         flex-grow: 1;
     }
 
-    input.shareUrl {
+    a.shareUrl {
         flex-grow: 1;
-        border: solid 1px #cccccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-right: 5px;
-        padding: 5px;
     }
 }

webapp/src/components/shareBoardComponent.tsx

@@ -70,11 +70,14 @@ class ShareBoardComponent extends React.PureComponent<Props, State> {
                     </div>
                     {isSharing && <>
                         <div className='row'>
-                            <input
+                            <a
                                 className='shareUrl'
-                                readOnly={true}
-                                value={shareUrl.toString()}
-                            />
+                                href={shareUrl.toString()}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                {shareUrl.toString()}
+                            </a>
                             <Button
                                 filled={true}
                                 onClick={() => {