Fix vertical button alignment across all admin themes

InputfieldAssistedURL.css

@@ -1,9 +1,89 @@
-.InputfieldAssistedURLOpen {
-  float:left;
+.InputfieldAssistedUrlText{
+  overflow: hidden;
+  position: relative;
+  padding-top: 0;
 }
 
-.InputfieldAssistedUrlText {
-  overflow: hidden;
-  padding-left: 0.8em;
-  padding-top: 0.4em;
+.InputfieldAssistedURL .InputfieldMaxWidth {
+  width: 100% !important;
+}
+
+/* Remove padding from button for consistancy between admin themes */
+.InputfieldAssistedURLOpen{
+  margin-right: 0 !important;
+}
+
+/**
+ * The flag object is a design pattern similar to the media object, however it
+ * utilises `display: table[-cell];` to give us control over the vertical
+ * alignments of the text and image.
+ * https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.flag.scss
+ * http://csswizardry.com/2013/05/the-flag-object/
+ *
+ * 1. Allows us to control vertical alignments.
+ * 2. Force the object to be the full width of its parent. Combined with [1],
+ *    this makes the object behave in a quasi-`display: block;` manner.
+ * 3. Reset inherited `border-spacing` declarations.
+ */
+.o-flag {
+  display: table; /* [1] */
+  width: 100%; /* [2] */
+  border-spacing: 0;
+}
+
+/**
+  * Items within a flag object. There should only ever be one of each.
+  *
+  * 1. Default to aligning content to their middles.
+  */
+.o-flag__img,
+.o-flag__body {
+  display: table-cell;
+  vertical-align: middle; /* [1] */
+}
+
+/**
+  * Flag images have a space between them and the body of the object.
+  *
+  * 1. Force `.flag__img` to take up as little space as possible:
+  *    https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
+  */
+.o-flag__img {
+  width: 1px; /* [1] */
+  padding-right: 1em;
+}
+
+/**
+  * 1. Fixes problem with images disappearing.
+  *
+  *    The direct child selector '>' needs to remain in order for nested flag
+  *    objects to not inherit their parent’s formatting. In case the image tag
+  *    is wrapped into another tag, e.g. an anchor for linking reasons, it will
+  *    disappear. In that case try wrapping the whole o-flag__img object into
+  *    an anchor tag.
+  *
+  *    E.g.:
+  *
+  *      <a href="/">
+  *        <div class="o-flag__img">
+  *          <img src="./link/to/image.jpg" alt="image alt text">
+  *        </div>
+  *      </a>
+  */
+.o-flag__img img {
+  max-width: none; /* [1] */
+}
+
+/**
+  * The container for the main content of the flag object.
+  *
+  * 1. Forces the `.flag__body` to take up all remaining space.
+  */
+.o-flag__body {
+  width: auto; /* [1] */
+}
+
+.o-flag__body,
+.o-flag__body > :last-child{
+  margin-bottom:0;
 }

InputfieldAssistedURL.module

@@ -64,6 +64,6 @@ class InputfieldAssistedURL extends Inputfield
         $btn->icon = 'link';
         $btn->value = '';
 
-        return $btn->render() . '<div class="InputfieldAssistedUrlText">' . $field->render() . '</div>';
+        return '<div class="InputfieldAssistedURLWrapper o-flag"><div class="o-flag__img">' . $btn->render() . '</div><div class="InputfieldAssistedUrlText o-flag__body">' . $field->render() . '</div></div>';
     }
 }