Make all photo groups inline

src/components/SummitPhotos.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="inline">
     <div v-for="group in groups" :key="group.key">
       <SummitPhotosGroup ref="photosGroup" :photos="group.photos" :title="group.title" :titleLink="group.titleLink" :summit="summit" :editable="editable" :showSummitName="showSummitName" :showWaypointButton="showWaypointButton" @editPhoto="onEditPhoto" @deletePhoto="onDeletePhoto" @reorderPhotos="onReorderPhotos">
         <template v-slot:title>
@@ -160,3 +160,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.inline {
+  display: inline-block;
+  vertical-align: top;
+}
+.inline > div {
+  display: inline-block;
+  vertical-align: top;
+}
+</style>

src/components/SummitPhotosGroup.vue

@@ -184,6 +184,7 @@ export default {
   padding: 0.25rem 0 0 0.75rem;
   display: inline-block;
   margin-bottom: 0.75rem;
+  margin-right: 0.75rem;
 }
 .photo-group-title {
   color: #777;

src/views/NewPhotos.vue

@@ -16,7 +16,7 @@
     <template>
       <section v-if="summits !== null && summits.length > 0" class="section">
         <div class="container">
-          <SummitPhotos v-for="summit in summits" class="inline" :key="summit.code" :summit="summit" :minDate="minDate" :showSummitName="true" />
+          <SummitPhotos v-for="summit in summits" :key="summit.code" :summit="summit" :minDate="minDate" :showSummitName="true" />
         </div>
       </section>
       <section v-else-if="summits != null" class="section">
@@ -103,11 +103,4 @@ export default {
     text-overflow: ellipsis;
   }
 }
-.inline {
-  display: inline-block;
-  vertical-align: top;
-}
->>> .photo-group {
-  margin-right: 0.75rem;
-}
 </style>