[GH-967] fix overflow URL property in cell (#982)

* (fix GH-967): add css property to fix width

* fix: review test link

* feat: review link scss on hover

* fix: add width inherit in url to occupy the whole space

* fix: merge error

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/properties/link returns link properties correctly 1`] = `
+<div>
+  <div
+    class="URLProperty property-link url"
+  >
+    <input
+      class="Editable octo-propertyvalue"
+      placeholder=""
+      title="https://github.com/mattermost/focalboard"
+      value="https://github.com/mattermost/focalboard"
+    />
+    <a
+      class="Link__button"
+      href="https://github.com/mattermost/focalboard"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <i
+        class="CompassIcon icon-link-variant LinkIcon"
+      />
+    </a>
+  </div>
+</div>
+`;

webapp/src/components/properties/link/link.scss

@@ -6,6 +6,11 @@
         width: 100%;
     }
 
+    a {
+        padding: 0 8px; // increases clickable area for better UX
+        align-self: stretch;
+    }
+
     .Link__button {
         display: none;
         flex: 0 0 24px;
@@ -39,5 +44,3 @@
         }
     }
 }
-
-

webapp/src/components/properties/link/link.test.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render} from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+import Link from './link'
+
+describe('components/properties/link', () => {
+    test('returns link properties correctly', () => {
+        const component = (
+            <Link
+                value={'https://github.com/mattermost/focalboard'}
+                onChange={jest.fn()}
+                onSave={jest.fn()}
+                onCancel={jest.fn()}
+                validator={jest.fn(() => {
+                    return true
+                })}
+            />
+        )
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+})