tweak special input field further

app/src/frontend/building/data-components/numeric-data-entry-with-formatted-link.css

@@ -6,4 +6,22 @@
 .with-margin {
     margin-left: 0.7em;
     margin-right: 0.7em;
+}
+
+.input-lookalike {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    text-align: left;
+    border-color: #999;
+    padding: .25rem .5rem;
 }

app/src/frontend/building/data-components/numeric-data-entry-with-formatted-link.tsx

@@ -48,7 +48,9 @@ const NumericDataEntryWithFormattedLink: React.FunctionComponent<NumericDataEntr
                         )
                     }
                 />
-                {props.value == undefined ? <div></div> : <a className="with-margin" href={props.linkTargetFunction(props.value)} target="_blank">{props.linkDescriptionFunction(props.value)}</a>}
+                <div className="input-lookalike with-margin">
+                    {props.value == undefined ? <div></div> : <a className="with-margin" href={props.linkTargetFunction(props.value)} target="_blank">{props.linkDescriptionFunction(props.value)}</a>}
+                </div>
             </FieldRow>
         </Fragment>
     );

app/src/frontend/building/data-containers/planning.tsx

@@ -133,8 +133,9 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
                     mode={props.mode}
                     copy={props.copy}
                     onChange={props.onChange}
+                    placeholder="If yes, add ID"
                     linkTargetFunction={(id: String) => { return "https://historicengland.org.uk/listing/the-list/list-entry/" + id + "?section=official-list-entry" } }
-                    linkDescriptionFunction={(id: String) => { return "description at the official site" } }
+                    linkDescriptionFunction={(id: String) => { return "ID Link" } }
                 />
                 <Verification
                     slug="planning_list_id"