--- a/client/src/components/stretches/Stretches.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/stretches/Stretches.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column mb-3">
+  <div class="d-flex flex-column">
     <UIBoxHeader
       icon="road"
       :title="defineStretchesLabel"
@@ -7,7 +7,7 @@
     />
     <div class="position-relative">
       <UISpinnerOverlay v-if="loading" />
-      <div v-if="!edit" class="mb-3">
+      <div v-if="!edit">
         <UITableHeader
           :columns="[
             { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' },
@@ -27,18 +27,18 @@
           :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
         >
           <template v-slot:row="{ item: stretch }">
-            <div class="py-1 col-4">
+            <div class="py-1 px-2 col-4">
               <a @click="moveMapToStretch(stretch)" href="#">
                 {{ stretch.properties.name }}
               </a>
             </div>
-            <div class="py-1 col-2">
+            <div class="py-1 px-2 col-2">
               {{ stretch.properties.date_info | surveyDate }}
             </div>
-            <div class="py-1 col-3">
+            <div class="py-1 px-2 col-3">
               {{ stretch.properties.source_organization }}
             </div>
-            <div class="py-1 col text-right">
+            <div class="py-1 px-2 col text-right">
               <button
                 v-if="isInStaging(stretch.properties.name)"
                 @click="gotoStaging(stretch.properties.name)"
@@ -65,16 +65,23 @@
             </div>
           </template>
         </UITableBody>
+        <div class="text-right p-2 border-top">
+          <button :key="1" @click="startEdit()" class="btn btn-sm btn-info">
+            <translate>New stretch</translate>
+          </button>
+        </div>
       </div>
       <div v-if="edit">
-        <div class="ml-3 mr-3">
-          <div class="d-flex flex-row justify-content-between">
-            <div class="mt-2 w-50 mr-2 text-left">
-              <small class="text-muted"> <translate>ID</translate> </small>
+        <div class="mx-2">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-left flex-fill mr-1">
+              <small class="text-muted">
+                <translate>ID</translate>
+              </small>
               <input
                 id="id"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="AT_Section_12"
                 aria-label="id"
                 v-model="id"
@@ -86,43 +93,44 @@
                 </small>
               </span>
             </div>
-            <div class="mt-2 w-50 ml-2 text-left">
-              <div>
-                <small class="text-muted">
-                  <translate>Countrycode</translate>
+            <div class="text-left flex-fill ml-1">
+              <small class="text-muted">
+                <translate>Countrycode</translate>
+              </small>
+              <input
+                id="countryCode"
+                type="text"
+                class="form-control form-control-sm"
+                placeholder="AT"
+                aria-label="id"
+                v-model="countryCode"
+              />
+              <span class="text-left text-danger">
+                <small v-if="countryCodeError && !countryCode">
+                  <translate>Please enter a countrycode </translate>
                 </small>
-                <input
-                  id="countryCode"
-                  type="text"
-                  class="form-control"
-                  placeholder="AT"
-                  aria-label="id"
-                  v-model="countryCode"
-                />
-                <span class="text-left text-danger">
-                  <small v-if="countryCodeError && !countryCode">
-                    <translate>Please enter a countrycode </translate>
-                  </small>
-                </span>
-              </div>
-              <div class="w-50 ml-2"></div>
+              </span>
             </div>
           </div>
-          <div class="d-flex flex-column  justify-content-between">
-            <div class="mt-2 text-left">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-left flex-fill mr-1">
               <small class="text-muted">
                 <translate>Start rhm</translate>
               </small>
-              <div class="d-flex flex-row">
+              <div class="d-flex flex-row position-relative">
                 <input
                   id="startrhm"
                   type="text"
-                  class="form-control"
+                  class="form-control form-control-sm"
                   placeholder="e.g. ATXXX000010000019900"
                   aria-label="startrhm"
                   v-model="startrhm"
                 />
-                <span class="input-group-text" @click="togglePipette('start')">
+                <span
+                  class="input-group-text position-absolute input-button"
+                  @click="togglePipette('start')"
+                  v-tooltip="pipetteTooltip"
+                >
                   <font-awesome-icon
                     :class="{ 'text-info': pipetteStart }"
                     icon="crosshairs"
@@ -135,18 +143,24 @@
                 </small>
               </span>
             </div>
-            <div class="mt-2 text-left">
-              <small class="text-muted"> <translate>End rhm</translate> </small>
-              <div class="d-flex flex-row">
+            <div class="text-left flex-fill ml-1">
+              <small class="text-muted">
+                <translate>End rhm</translate>
+              </small>
+              <div class="d-flex flex-row position-relative">
                 <input
                   id="endrhm"
                   type="text"
-                  class="form-control"
+                  class="form-control form-control-sm"
                   placeholder="e.g. ATXXX000010000019900"
                   aria-label="endrhm"
                   v-model="endrhm"
                 />
-                <span class="input-group-text" @click="togglePipette('end')">
+                <span
+                  class="input-group-text position-absolute input-button"
+                  @click="togglePipette('end')"
+                  v-tooltip="pipetteTooltip"
+                >
                   <font-awesome-icon
                     :class="{ 'text-info': pipetteEnd }"
                     icon="crosshairs"
@@ -164,14 +178,14 @@
             v-if="!editExistingStretch"
             class="d-flex flex-row justify-content-between"
           >
-            <div class="mt-2  mr-2 w-50  text-left">
+            <div class="mt-2 mr-2 w-50 text-left">
               <small class="text-muted">
                 <translate
                   >Tolerance for snapping of waterway axis [m]</translate
                 >
               </small>
               <input
-                class="form-control"
+                class="form-control form-control-sm"
                 v-model.number="tolerance"
                 placeholder=""
                 type="number"
@@ -195,7 +209,7 @@
               <input
                 id="objbn"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder=""
                 aria-label="objbn"
                 v-model="objbn"
@@ -213,7 +227,7 @@
               <input
                 id="nobjbn"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder=""
                 aria-label="nobjbn"
                 v-model="nobjbn"
@@ -228,7 +242,7 @@
               <input
                 id="date_info"
                 type="date"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="date_info"
                 aria-label="date_info"
                 v-model="date_info"
@@ -244,7 +258,7 @@
               <input
                 id="source"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="source"
                 aria-label="source"
                 v-model="source"
@@ -257,28 +271,31 @@
             </div>
           </div>
         </div>
-        <div class="text-right mt-2 mr-3 mb-3">
-          <button @click="edit = false" class="btn btn-warning mr-2">
+        <div class="d-flex justify-content-between mt-2 p-2 border-top">
+          <button :key="2" @click="edit = false" class="btn btn-sm btn-warning">
             Back
           </button>
           <button
             @click="save"
             type="submit"
-            class="shadow-sm btn btn-info submit-button"
+            class="shadow-sm btn btn-sm btn-info submit-button"
           >
             <translate>Submit</translate>
           </button>
         </div>
       </div>
-      <div class="text-right mr-3">
-        <button v-if="!edit" @click="startEdit()" class="btn btn-info">
-          <translate>New stretch</translate>
-        </button>
-      </div>
     </div>
   </div>
 </template>
 
+<style lang="sass" scoped>
+.input-button
+  border-top-left-radius: 0
+  border-bottom-left-radius: 0
+  right: 0
+  height: 31px
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -352,6 +369,9 @@
     },
     reviewTooltip() {
       return this.$gettext("Review pending import");
+    },
+    pipetteTooltip() {
+      return this.$gettext("Choose a distance mark by clicking on the map.");
     }
   },
   watch: {