🎨

src/client/app/admin/views/emoji.vue

@@ -24,9 +24,12 @@
 
 	<ui-card>
 		<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
-		<section v-for="emoji in emojis">
+		<section v-for="emoji in emojis" class="oryfrbft">
+			<div>
 				<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
-			<ui-horizon-group inputs>
+			</div>
+			<div>
+				<ui-horizon-group>
 					<ui-input v-model="emoji.name">
 						<span>{{ $t('add-emoji.name') }}</span>
 					</ui-input>
@@ -42,6 +45,7 @@
 					<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
 					<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
 				</ui-horizon-group>
+			</div>
 		</section>
 	</ui-card>
 </div>
@@ -150,4 +154,21 @@ export default Vue.extend({
 	@media (min-width 500px)
 		padding 16px
 
+	.oryfrbft
+		@media (min-width 500px)
+			display flex
+
+		> div:first-child
+			@media (max-width 500px)
+				padding-bottom 16px
+
+			> img
+				vertical-align bottom
+
+		> div:last-child
+			flex 1
+
+			@media (min-width 500px)
+				padding-left 16px
+
 </style>