fix endless endpoint calls when sorting

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts

@@ -138,6 +138,7 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 
 		this.observe(this.#pickerContext.selectedItems, async (selectedItems) => {
 			if (!selectedItems?.length) {
+				this._items = [];
 				return;
 			}
 
@@ -254,9 +255,9 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 			}
 			.container {
 				display: grid;
-				gap: var(--uui-size-space-3);
 				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 				grid-auto-rows: 150px;
+				gap: var(--uui-size-space-5);
 			}
 
 			#btn-add {

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -44,10 +44,21 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 		resolvePlacement: () => false,
 		onChange: ({ model }) => {
 			this.#items = model;
+			this.#sortCards(model);
 			this.dispatchEvent(new UmbChangeEvent());
 		},
 	});
 
+	#sortCards(model: Array<UmbMediaPickerPropertyValue>) {
+		const idToIndexMap: { [unique: string]: number } = {};
+		model.forEach((item, index) => {
+			idToIndexMap[item.key] = index;
+		});
+
+		const cards = [...this._cards];
+		this._cards = cards.sort((a, b) => idToIndexMap[a.unique] - idToIndexMap[b.unique]);
+	}
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -214,7 +225,9 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 	}
 
 	async #populateCards() {
-		// TODO This is being called twice when picking an media item. We don't want to call the server unnecessary...
+		const missingCards = this.items.filter((item) => !this._cards.find((card) => card.unique === item.key));
+		if (!missingCards.length) return;
+
 		if (!this.items?.length) {
 			this._cards = [];
 			return;