From 9c32c0d99fcd2ea62829781c994e29da3c039538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Wed, 7 Jan 2026 09:15:52 +0100
Subject: [PATCH] feat(modal): enhance modal functionality with resizing
 support and improved layout

---
 .../_components/a-concepts-table.vue          |   9 +-
 .../plugins/tm@modal/_mixins/modal.mixin.ts   | 188 +++++------
 .../tm@modal/_utils/modal-resize.utils.ts     | 299 ++++++++++--------
 .../tm@modal/blocker/z-blocker-modal.vue      |  29 +-
 .../blocker/z-delete-blocker-modal.vue        |   5 +-
 .../z-complete-master-task-modal.vue          |   5 +-
 .../z-delete-master-task-modal.vue            |   5 +-
 .../z-delete-team-member-modal.vue            |   5 +-
 .../master-task/z-master-task-modal.vue       |   7 +-
 .../tm@modal/task-cell/z-show-menu-modal.vue  |  86 ++---
 .../_components/a-task-spent-time.vue         |  33 +-
 .../_components/a-task-timeblocks.vue         |  57 +++-
 .../tm@modal/task/z-complete-task-modal.vue   |  24 +-
 .../tm@modal/task/z-delete-task-modal.vue     |  24 +-
 .../task/z-delete-timeblock-modal.vue         |  24 +-
 .../tm@modal/task/z-remove-employee-modal.vue |  24 +-
 .../task/z-remove-timeblock-modal.vue         |  24 +-
 .../tm@modal/task/z-task-add-time-modal.vue   |  24 +-
 .../plugins/tm@modal/task/z-task-modal.vue    |   1 +
 .../task/z-unable-to-complete-task-modal.vue  |   5 +-
 .../z-unable-to-edit-office-task-modal.vue    |  16 +-
 .../tm@modal/team/z-delete-team-modal.vue     |   5 +-
 .../plugins/tm@modal/team/z-team-modal.vue    |   1 +
 23 files changed, 569 insertions(+), 331 deletions(-)

diff --git a/app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue b/app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue
index 601c764..428bb33 100644
--- a/app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue
+++ b/app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue
@@ -2,9 +2,7 @@
   <v-table>
     <thead>
       <tr>
-        <th class="text-left">
-          Kód projektu
-        </th>
+        <th class="text-left">Kód projektu</th>
         <th class="text-left">Názov</th>
         <th class="text-left">Deadline</th>
         <th class="text-left">Najbližší neuzavretý</th>
@@ -36,7 +34,7 @@
         <td>{{ (subtask.duration - subtask.spent_time).toFixed(2) }} h</td>
 
         <td class="task-action">
-          <div class="d-flex justify-start align-center">
+          <div class="d-flex justify-start align-center" style="gap: 10px">
             <template v-if="subtask.type == 'office365'">
               <img
                 class="pencil-icon"
@@ -58,7 +56,7 @@
                 @click.stop="editTask(subtask, false)"
               />
               <img
-                class="trash-icon"
+                class="trash-icon ml-0"
                 :src="bin"
                 @click.stop="deleteTask(subtask)"
               />
@@ -176,4 +174,3 @@ tbody
 	tr:hover
 		background: rgba(0,0,0,.1)
 </style>
-
diff --git a/app/src/plugins/tm@modal/_mixins/modal.mixin.ts b/app/src/plugins/tm@modal/_mixins/modal.mixin.ts
index 19a78d0..1b2ccb3 100644
--- a/app/src/plugins/tm@modal/_mixins/modal.mixin.ts
+++ b/app/src/plugins/tm@modal/_mixins/modal.mixin.ts
@@ -1,107 +1,113 @@
-import modalResizeUtils from '@/plugins/tm@modal/_utils/modal-resize.utils'
+import modalResizeUtils from '@/plugins/tm@modal/_utils/modal-resize.utils';
 
 export default {
-	data() {
-		return {
-			modalWidth: '100%',
-			modalHeight: '100%',
-			modalName: '' // Should be set by component
-		}
-	},
+  data() {
+    return {
+      modalWidth: undefined, // Should be set by component
+      modalHeight: undefined, // Should be set by component
+      modalName: '', // Should be set by component
+      modalSize: 'medium' as 'small' | 'medium' | 'large', // Size preset: small, medium, or large
+    };
+  },
 
-	computed: {
-		modalWidthPx() {
-			return this.modalWidth
-		},
-		modalHeightPx() {
-			return this.modalHeight
-		}
-	},
+  computed: {
+    modalWidthPx() {
+      return this.modalWidth;
+    },
+    modalHeightPx() {
+      return this.modalHeight;
+    },
+  },
 
-	mounted() {
-		window.addEventListener('keydown', this.handleKeyDown)
-		window.addEventListener('resize', this.handleWindowResize)
-		this.initModalSize()
-	},
+  mounted() {
+    window.addEventListener('keydown', this.handleKeyDown);
+    window.addEventListener('resize', this.handleWindowResize);
+    this.initModalSize();
+  },
 
-	beforeUnmount() {
-		window.removeEventListener('keydown', this.handleKeyDown)
-		window.removeEventListener('resize', this.handleWindowResize)
-	},
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.handleKeyDown);
+    window.removeEventListener('resize', this.handleWindowResize);
+  },
 
-	methods: {
-		handleKeyDown(event) {
-			// if (event.keyCode === 27) this.closeModal()
-			if (event.keyCode === 27) this.visible = false
-		},
+  methods: {
+    handleKeyDown(event) {
+      // if (event.keyCode === 27) this.closeModal()
+      if (event.keyCode === 27) this.visible = false;
+    },
 
-		/**
-		 * Initialize modal size from localStorage or defaults
-		 */
-		initModalSize() {
-			if (!this.modalName) {
-				console.warn('Modal name not set for resize functionality')
-				return
-			}
+    /**
+     * Initialize modal size from localStorage or defaults
+     */
+    initModalSize() {
+      if (!this.modalName) {
+        console.warn('Modal name not set for resize functionality');
+        return;
+      }
 
-			const size = modalResizeUtils.getModalSize(this.modalName)
-			this.modalWidth = typeof size.width === 'number' ? `${size.width}px` : size.width
-			this.modalHeight = typeof size.height === 'number' ? `${size.height}px` : size.height
-		},
+      const size = modalResizeUtils.getModalSize(
+        this.modalName,
+        this.modalSize,
+      );
+      this.modalWidth =
+        typeof size.width === 'number' ? `${size.width}px` : size.width;
+      this.modalHeight =
+        typeof size.height === 'number' ? `${size.height}px` : size.height;
+    },
 
-		/**
-		 * Handle window resize - adjust modal if on mobile
-		 */
-		handleWindowResize() {
-			if (modalResizeUtils.isMobile()) {
-				this.modalWidth = '100%'
-				this.modalHeight = '100%'
-			} else {
-				// Reload stored or default size on desktop
-				this.initModalSize()
-			}
-		},
+    /**
+     * Handle window resize - adjust modal if on mobile
+     */
+    handleWindowResize() {
+      if (modalResizeUtils.isMobile()) {
+        this.modalWidth = '100%';
+        this.modalHeight = '100%';
+      } else {
+        // Reload stored or default size on desktop
+        this.initModalSize();
+      }
+    },
 
-		/**
-		 * Handle modal resize from resize handle
-		 */
-		handleModalResize({ width, height }) {
-			if (modalResizeUtils.isMobile()) {
-				return // Don't resize on mobile
-			}
+    /**
+     * Handle modal resize from resize handle
+     */
+    handleModalResize({ width, height }) {
+      if (modalResizeUtils.isMobile()) {
+        return; // Don't resize on mobile
+      }
 
-			const constrained = modalResizeUtils.constrainSize(width, height)
-			this.modalWidth = `${constrained.width}px`
-			this.modalHeight = `${constrained.height}px`
-		},
+      const constrained = modalResizeUtils.constrainSize(width, height);
+      this.modalWidth = `${constrained.width}px`;
+      this.modalHeight = `${constrained.height}px`;
+    },
 
-		/**
-		 * Handle resize end - save to localStorage
-		 */
-		handleResizeEnd() {
-			if (!this.modalName || modalResizeUtils.isMobile()) {
-				return
-			}
+    /**
+     * Handle resize end - save to localStorage
+     */
+    handleResizeEnd() {
+      if (!this.modalName || modalResizeUtils.isMobile()) {
+        return;
+      }
 
-			// Parse current dimensions
-			const width = parseFloat(this.modalWidth)
-			const height = parseFloat(this.modalHeight)
+      // Parse current dimensions
+      const width = parseFloat(this.modalWidth);
+      const height = parseFloat(this.modalHeight);
 
-			if (!isNaN(width) && !isNaN(height)) {
-				modalResizeUtils.saveSize(this.modalName, width, height)
-			}
-		},
+      if (!isNaN(width) && !isNaN(height)) {
+        modalResizeUtils.saveSize(this.modalName, width, height);
+      }
+    },
 
-		/**
-		 * Reset modal size to defaults
-		 */
-		resetModalSize() {
-			if (!this.modalName) {
-				return
-			}
+    /**
+     * Reset modal size to defaults
+     */
+    resetModalSize() {
+      if (!this.modalName) {
+        return;
+      }
 
-			modalResizeUtils.resetSize(this.modalName)
-			this.initModalSize()
-		}
-	}
-}
\ No newline at end of file
+      modalResizeUtils.resetSize(this.modalName);
+      this.initModalSize();
+    },
+  },
+};
diff --git a/app/src/plugins/tm@modal/_utils/modal-resize.utils.ts b/app/src/plugins/tm@modal/_utils/modal-resize.utils.ts
index a5335ac..45419f6 100644
--- a/app/src/plugins/tm@modal/_utils/modal-resize.utils.ts
+++ b/app/src/plugins/tm@modal/_utils/modal-resize.utils.ts
@@ -1,162 +1,191 @@
 interface ModalSize {
-	width: string | number
-	height: string | number
+  width: string | number;
+  height: string | number;
 }
 
 interface StoredModalSize {
-	width: number
-	height: number
-	timestamp: number
+  width: number;
+  height: number;
+  timestamp: number;
 }
 
-const MOBILE_BREAKPOINT = 768
-const DEFAULT_DESKTOP_WIDTH_PERCENT = 80
-const DEFAULT_DESKTOP_MAX_WIDTH = 1440
-const DEFAULT_DESKTOP_HEIGHT_PERCENT = 90
+const MOBILE_BREAKPOINT = 768;
+
+// Size presets
+const SIZE_PRESETS = {
+  small: {
+    width: 600,
+    height: 'fit-content',
+    maxWidth: 600,
+  },
+  medium: {
+    width: 900,
+    height: 'fit-content',
+    maxWidth: 900,
+  },
+  large: {
+    width: '75%',
+    height: '90%',
+    maxWidth: '85%',
+  },
+};
 
 export default {
-	/**
-	 * Check if the current viewport is mobile
-	 */
-	isMobile(): boolean {
-		return window.innerWidth <= MOBILE_BREAKPOINT
-	},
+  /**
+   * Check if the current viewport is mobile
+   */
+  isMobile(): boolean {
+    return window.innerWidth <= MOBILE_BREAKPOINT;
+  },
 
-	/**
-	 * Get default modal size based on viewport
-	 */
-	getDefaultSize(): ModalSize {
-		if (this.isMobile()) {
-			return {
-				width: '100%',
-				height: '100%'
-			}
-		}
+  /**
+   * Get default modal size based on viewport and size preset
+   */
+  getDefaultSize(size: 'small' | 'medium' | 'large' = 'medium'): ModalSize {
+    if (this.isMobile()) {
+      return {
+        width: '100%',
+        height: '100%',
+      };
+    }
 
-		const viewportWidth = window.innerWidth
-		const calculatedWidth = Math.min(
-			(viewportWidth * DEFAULT_DESKTOP_WIDTH_PERCENT) / 100,
-			DEFAULT_DESKTOP_MAX_WIDTH
-		)
-		const calculatedHeight = (window.innerHeight * DEFAULT_DESKTOP_HEIGHT_PERCENT) / 100
+    const preset = SIZE_PRESETS[size];
 
-		return {
-			width: calculatedWidth,
-			height: calculatedHeight
-		}
-	},
+    // For large size, use percentages; for small/medium use fixed px values
+    if (size === 'large') {
+      return {
+        width: preset.width,
+        height: preset.height,
+      };
+    }
 
-	/**
-	 * Get stored modal size from localStorage
-	 */
-	getStoredSize(modalName: string): ModalSize | null {
-		try {
-			const key = `modal-size-${modalName}`
-			const stored = localStorage.getItem(key)
+    // For small and medium, return the px values directly
+    return {
+      width: preset.width,
+      height: preset.height,
+    };
+  },
 
-			if (!stored) {
-				return null
-			}
+  /**
+   * Get stored modal size from localStorage
+   */
+  getStoredSize(modalName: string): ModalSize | null {
+    try {
+      const key = `modal-size-${modalName}`;
+      const stored = localStorage.getItem(key);
 
-			const parsed: StoredModalSize = JSON.parse(stored)
+      if (!stored) {
+        return null;
+      }
 
-			// Return stored size if it exists and is valid
-			if (parsed && typeof parsed.width === 'number' && typeof parsed.height === 'number') {
-				return {
-					width: parsed.width,
-					height: parsed.height
-				}
-			}
+      const parsed: StoredModalSize = JSON.parse(stored);
 
-			return null
-		} catch (error) {
-			console.error('Error reading stored modal size:', error)
-			return null
-		}
-	},
+      // Return stored size if it exists and is valid
+      if (
+        parsed &&
+        typeof parsed.width === 'number' &&
+        typeof parsed.height === 'number'
+      ) {
+        return {
+          width: parsed.width,
+          height: parsed.height,
+        };
+      }
 
-	/**
-	 * Save modal size to localStorage
-	 */
-	saveSize(modalName: string, width: number, height: number): void {
-		try {
-			const key = `modal-size-${modalName}`
-			const data: StoredModalSize = {
-				width,
-				height,
-				timestamp: Date.now()
-			}
-			localStorage.setItem(key, JSON.stringify(data))
-		} catch (error) {
-			console.error('Error saving modal size:', error)
-		}
-	},
+      return null;
+    } catch (error) {
+      console.error('Error reading stored modal size:', error);
+      return null;
+    }
+  },
 
-	/**
-	 * Reset modal size (clear from localStorage)
-	 */
-	resetSize(modalName: string): void {
-		try {
-			const key = `modal-size-${modalName}`
-			localStorage.removeItem(key)
-		} catch (error) {
-			console.error('Error resetting modal size:', error)
-		}
-	},
+  /**
+   * Save modal size to localStorage
+   */
+  saveSize(modalName: string, width: number, height: number): void {
+    try {
+      const key = `modal-size-${modalName}`;
+      const data: StoredModalSize = {
+        width,
+        height,
+        timestamp: Date.now(),
+      };
+      localStorage.setItem(key, JSON.stringify(data));
+    } catch (error) {
+      console.error('Error saving modal size:', error);
+    }
+  },
 
-	/**
-	 * Get modal size (stored or default)
-	 */
-	getModalSize(modalName: string): ModalSize {
-		// On mobile, always return 100%
-		if (this.isMobile()) {
-			return {
-				width: '100%',
-				height: '100%'
-			}
-		}
+  /**
+   * Reset modal size (clear from localStorage)
+   */
+  resetSize(modalName: string): void {
+    try {
+      const key = `modal-size-${modalName}`;
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('Error resetting modal size:', error);
+    }
+  },
 
-		// Check for stored size
-		const storedSize = this.getStoredSize(modalName)
-		if (storedSize) {
-			return storedSize
-		}
+  /**
+   * Get modal size (stored or default)
+   */
+  getModalSize(
+    modalName: string,
+    size: 'small' | 'medium' | 'large' = 'medium',
+  ): ModalSize {
+    // On mobile, always return 100%
+    if (this.isMobile()) {
+      return {
+        width: '100%',
+        height: '100%',
+      };
+    }
 
-		// Return default size
-		return this.getDefaultSize()
-	},
+    // Check for stored size
+    const storedSize = this.getStoredSize(modalName);
+    if (storedSize) {
+      return storedSize;
+    }
 
-	/**
-	 * Convert size to pixels if percentage, otherwise return as is
-	 */
-	normalizeSize(size: string | number): number {
-		if (typeof size === 'number') {
-			return size
-		}
+    // Return default size based on preset
+    return this.getDefaultSize(size);
+  },
 
-		// If it's a percentage, calculate pixel value
-		if (size.includes('%')) {
-			const percent = parseFloat(size)
-			return (window.innerWidth * percent) / 100
-		}
+  /**
+   * Convert size to pixels if percentage, otherwise return as is
+   */
+  normalizeSize(size: string | number): number {
+    if (typeof size === 'number') {
+      return size;
+    }
 
-		// If it's already pixels, parse it
-		return parseFloat(size)
-	},
+    // If it's a percentage, calculate pixel value
+    if (size.includes('%')) {
+      const percent = parseFloat(size);
+      return (window.innerWidth * percent) / 100;
+    }
 
-	/**
-	 * Constrain size within reasonable bounds
-	 */
-	constrainSize(width: number, height: number): { width: number; height: number } {
-		const minWidth = 400
-		const minHeight = 300
-		const maxWidth = window.innerWidth
-		const maxHeight = window.innerHeight
+    // If it's already pixels, parse it
+    return parseFloat(size);
+  },
 
-		return {
-			width: Math.max(minWidth, Math.min(width, maxWidth)),
-			height: Math.max(minHeight, Math.min(height, maxHeight))
-		}
-	}
-}
+  /**
+   * Constrain size within reasonable bounds
+   */
+  constrainSize(
+    width: number,
+    height: number,
+  ): { width: number; height: number } {
+    const minWidth = 400;
+    const minHeight = 300;
+    const maxWidth = window.innerWidth;
+    const maxHeight = window.innerHeight;
 
+    return {
+      width: Math.max(minWidth, Math.min(width, maxWidth)),
+      height: Math.max(minHeight, Math.min(height, maxHeight)),
+    };
+  },
+};
diff --git a/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
index c4c2001..209bc51 100644
--- a/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
+++ b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
@@ -7,14 +7,17 @@
     :retain-focus="false"
   >
     <W-loadable :content="blocker" class="h-100">
-      <v-card height="100%" class="d-flex flex-column">
+      <v-card
+        style="position: relative; height: 100%"
+        class="d-flex flex-column"
+      >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť' }} blocker</h1>
-          <v-icon
-            icon="mdi-close"
-            size="large"
-            @click.stop="closeModal()"
-          ></v-icon>
+
+          <div class="d-flex align-center">
+            <a-reset-size-button @reset="resetModalSize" />
+            <a-close-button @close="closeModal()" />
+          </div>
         </div>
 
         <v-card-actions class="d-flex flex-column modal-content">
@@ -92,6 +95,12 @@
         <v-btn class="button primary" @click="save()">{{
           blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
         }}</v-btn>
+        <a-resize-handle
+          :current-width="modalWidthPx"
+          :current-height="modalHeightPx"
+          @resize="handleModalResize"
+          @resize-end="handleResizeEnd"
+        />
       </v-card>
     </W-loadable>
   </v-dialog>
@@ -106,11 +115,17 @@ import { mapGetters } from 'vuex';
 import moment from 'moment';
 import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
     ZDatepicker,
     // ZAutocomplete
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
   },
   mixins: [AutocompleteMixin, modalMixin],
 
@@ -126,6 +141,8 @@ export default {
       starts_at_time: null,
       ends_at_time: null,
       employee: null,
+      modalName: 'z-blocker-modal',
+      modalSize: 'large',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue b/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
index d801e6c..f0b82c1 100644
--- a/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
+++ b/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
@@ -6,14 +6,14 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       blocker: null,
       isDeleting: false,
       modalName: 'z-delete-blocker-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue
index 460786c..c4ab61b 100644
--- a/app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue
@@ -6,7 +6,7 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete
@@ -14,7 +14,7 @@
           <b>{{ mastertask?.name }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="() => (visible = false)" />
         </div>
@@ -59,6 +59,7 @@ export default {
       visible: false,
       mastertask: null,
       modalName: 'z-complete-master-task-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
index 0956d5f..262118e 100644
--- a/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
@@ -6,14 +6,14 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       mastertask: null,
       isDeleting: false,
       modalName: 'z-delete-master-task-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue b/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue
index de502fe..67299a7 100644
--- a/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue
@@ -6,10 +6,10 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-h5">Chcete túto osobu odstrániť z tímu?</h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -58,6 +58,7 @@ export default {
       member: null,
       team: null,
       modalName: 'z-delete-team-member-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
index d3d4738..dd29aab 100644
--- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
@@ -9,9 +9,8 @@
     <W-loadable :content="mastertask" class="h-100">
       <v-card
         v-if="editMode"
-        height="100%"
+        style="position: relative; height: 100%"
         class="d-flex flex-column scrolling"
-        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>
@@ -249,9 +248,8 @@
 
       <v-card
         v-else
-        height="100%"
+        style="position: relative; height: 100%"
         class="d-flex flex-column scrolling"
-        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center">
           <p>{{ mastertask.project_code }}</p>
@@ -378,6 +376,7 @@ export default {
       date: null,
       projectCodeSearch: null,
       modalName: 'z-master-task-modal',
+      modalSize: 'large',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue b/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
index fff58d3..0d3e148 100644
--- a/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
+++ b/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
@@ -1,39 +1,52 @@
 <template>
-	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
-		<v-card style="position: relative">
-			<div class="d-flex justify-space-between align-center">
-				<h1>Vytvoriť</h1>
-				<div class="d-flex align-center">
-					<a-reset-size-button @reset="resetModalSize" />
-					<a-close-button @close="closeModal()" />
-				</div>
-			</div>
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
+      <div class="d-flex justify-space-between align-center">
+        <h1>Vytvoriť</h1>
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
+          <a-close-button @close="closeModal()" />
+        </div>
+      </div>
 
-			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
-				<v-btn class="button primary half outline" @click.stop="createTask()"
-					>SUB TASK</v-btn
-				>
-				<v-btn class="button primary half outline" @click.stop="createBlocker()"
-					>BLOCKER</v-btn
-				>
-			</v-card-actions>
-			<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" />
-		</v-card>
-	</v-dialog>
+      <v-card-actions
+        class="mt-10 d-flex justify-start align-center mobile-view"
+      >
+        <v-btn class="button primary half outline" @click.stop="createTask()"
+          >SUB TASK</v-btn
+        >
+        <v-btn class="button primary half outline" @click.stop="createBlocker()"
+          >BLOCKER</v-btn
+        >
+      </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
-import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue'
-import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue'
-import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
-
-	components: {
-		AResizeHandle,
-		AResetSizeButton, ACloseButton,
-	},
+  components: {
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
+  },
   mixins: [modalMixin],
   props: {
     data: {
@@ -43,13 +56,14 @@ export default {
   },
   emits: ['update', 'data'],
 
-	data() {
-		return {
-			visible: false,
-			localData: null,
-			modalName: 'z-show-menu-modal',
-		}
-	},
+  data() {
+    return {
+      visible: false,
+      localData: null,
+      modalName: 'z-show-menu-modal',
+      modalSize: 'small',
+    };
+  },
 
   mounted() {
     this.$events.on('blocker-created', () => {
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
index 794159e..f91b5f6 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
@@ -51,16 +51,21 @@
     </v-col>
   </v-row>
 
-  <v-dialog v-model="showModal" width="750" persistent :retain-focus="false">
+  <v-dialog
+    v-model="showModal"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>
 
-        <v-icon
-          icon="mdi-close"
-          size="large"
-          @click.stop="closeModal()"
-        ></v-icon>
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
+          <a-close-button @close="closeModal()" />
+        </div>
       </div>
       <v-card-actions class="mt-10 d-flex justify-start align-center">
         <v-text-field
@@ -79,6 +84,12 @@
         />
       </v-card-actions>
       <v-btn class="button primary mt-5" @click="submit()">Potvrdiť</v-btn>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -91,8 +102,16 @@ import { required, numeric, minValue } from '@vuelidate/validators';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import { mapGetters } from 'vuex';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
+  components: {
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
+  },
   mixins: [modalMixin],
   props: {
     hours: {
@@ -115,6 +134,8 @@ export default {
       form: {
         hours: null,
       },
+      modalName: 'a-task-spent-time-modal',
+      modalSize: 'medium',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
index dcbef4c..5bd71f4 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
@@ -86,18 +86,21 @@
 
   <v-dialog
     v-model="showModal"
-    max-width="900"
+    :width="modalWidth"
+    :height="modalHeight"
     persistent
     :retain-focus="false"
   >
-    <v-card class="add-timeblock-modal">
+    <v-card
+      style="position: relative; height: 100%"
+      class="add-timeblock-modal"
+    >
       <div class="d-flex justify-space-between align-center pa-4">
         <h1>Pridať dátum</h1>
-        <v-icon
-          icon="mdi-close"
-          size="large"
-          @click.stop="closeModal()"
-        ></v-icon>
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
+          <a-close-button @close="closeModal()" />
+        </div>
       </div>
 
       <v-card-text class="pa-4">
@@ -116,9 +119,21 @@
           Potvrdiť
         </v-btn>
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-red">
@@ -126,12 +141,10 @@
           <b class="text-black">z mastertasku {{ subtask?.project_code }} ?</b>
         </h1>
 
-        <v-icon
-          icon="mdi-close"
-          size="large"
-          class="mb-15"
-          @click.stop="visible = false"
-        ></v-icon>
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
+          <a-close-button @close="closeModal()" />
+        </div>
       </div>
       <v-card-actions
         class="mt-10 d-flex justify-start align-center mobile-view"
@@ -142,10 +155,16 @@
           @click.stop="confirmSubmit()"
           >ÁNO</v-btn
         >
-        <v-btn class="button primary half outline" @click.stop="visible = false"
+        <v-btn class="button primary half outline" @click.stop="closeModal()"
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -163,11 +182,17 @@ import {
   getCollisionSegments,
   calculateTimeblockDuration,
 } from '@/plugins/tm@_utils/timeblock.utils';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
 
 export default {
   components: {
     AEmployeeTimeblock,
     // AEmployeeTimeblockTimeline,
+    AResetSizeButton,
+    ACloseButton,
+    AResizeHandle,
   },
   mixins: [modalMixin],
 
@@ -204,6 +229,8 @@ export default {
       HOUR_WIDTH_MOBILE: 50,
       // Existing timeblocks timeline data
       existingTimeblocksData: {}, // { [index]: { tasks: [], loading: false } }
+      modalName: 'a-task-timeblocks-modal',
+      modalSize: 'medium',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
index 140808b..e9ac129 100644
--- a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
@@ -1,6 +1,12 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete
@@ -9,7 +15,8 @@
           <b>{{ subtask?.master_task?.name || subtask.master_task }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -23,6 +30,12 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -30,10 +43,14 @@
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -44,6 +61,7 @@ export default {
       visible: false,
       subtask: null,
       modalName: 'z-complete-task-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
index 295f9df..639b15a 100644
--- a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
@@ -1,6 +1,12 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať sub task z mastertasku
@@ -8,7 +14,8 @@
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -26,16 +33,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -47,6 +64,7 @@ export default {
       subtask: null,
       isDeleting: false,
       modalName: 'z-delete-task-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue b/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
index cc1170f..0040045 100644
--- a/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -31,6 +38,12 @@
           "
         />
       </div>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -39,10 +52,14 @@
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -55,6 +72,7 @@ export default {
       isDeleting: false,
       tmUtils,
       modalName: 'z-delete-timeblock-modal',
+      modalSize: 'medium',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-remove-employee-modal.vue b/app/src/plugins/tm@modal/task/z-remove-employee-modal.vue
index 129d0cf..2a16a46 100644
--- a/app/src/plugins/tm@modal/task/z-remove-employee-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-remove-employee-modal.vue
@@ -1,12 +1,19 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Naozaj chcete odstrániť tohto zamestnanca a všetky jeho timeblocks?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -20,16 +27,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -39,6 +56,7 @@ export default {
     return {
       visible: false,
       modalName: 'z-remove-employee-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-remove-timeblock-modal.vue b/app/src/plugins/tm@modal/task/z-remove-timeblock-modal.vue
index be4d49e..a65775c 100644
--- a/app/src/plugins/tm@modal/task/z-remove-timeblock-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-remove-timeblock-modal.vue
@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Naozaj chcete odstrániť tento timeblock?</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -18,16 +25,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -36,6 +53,7 @@ export default {
     return {
       visible: false,
       modalName: 'z-remove-timeblock-modal',
+      modalSize: 'small',
       onConfirmCallback: null,
     };
   },
diff --git a/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue b/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
index 8785a6f..93041c2 100644
--- a/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
-    <v-card style="position: relative">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -25,6 +32,12 @@
         />
       </v-card-actions>
       <v-btn class="button primary mt-5" @click="submit()">Potvrdiť</v-btn>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -36,10 +49,14 @@ import { required, numeric, minValue } from '@vuelidate/validators';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -55,6 +72,7 @@ export default {
         hours: null,
       },
       modalName: 'z-task-add-time-modal',
+      modalSize: 'medium',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue
index 4480cfa..504e2ad 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -322,6 +322,7 @@ export default {
       deletedTimeblockIds: [], // Track IDs of saved timeblocks that have been deleted
       wasFormValidationTriggered: false,
       modalName: 'z-task-modal',
+      modalSize: 'large',
       employeeRefs: [],
       pendingRemoveEmployeeId: undefined,
       pendingRemoveEmployeeIndex: undefined,
diff --git a/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
index 67e7295..8f1c639 100644
--- a/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
@@ -6,11 +6,11 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Sub Task má nedokončené úlohy</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -94,6 +94,7 @@ export default {
       loadingTimeblocks: {},
       loadingCloseAll: false,
       modalName: 'z-unable-to-complete-task-modal',
+      modalSize: 'medium',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue b/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
index e38ec17..6dedb2b 100644
--- a/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue
@@ -6,7 +6,7 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1 v-if="mode === 'edit'">
           Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho
@@ -17,20 +17,31 @@
           svojom kalendári a pockajte na zosynchronizovanie s Task Managerom
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
 
@@ -49,6 +60,7 @@ export default {
       visible: false,
       subtask: null,
       modalName: 'z-unable-to-edit-office-task-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/team/z-delete-team-modal.vue b/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
index cf124f8..25bcaf8 100644
--- a/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
+++ b/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
@@ -6,13 +6,13 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       team: null,
       isDeleting: false,
       modalName: 'z-delete-team-modal',
+      modalSize: 'small',
     };
   },
 
diff --git a/app/src/plugins/tm@modal/team/z-team-modal.vue b/app/src/plugins/tm@modal/team/z-team-modal.vue
index c716d24..e59daf1 100644
--- a/app/src/plugins/tm@modal/team/z-team-modal.vue
+++ b/app/src/plugins/tm@modal/team/z-team-modal.vue
@@ -117,6 +117,7 @@ export default {
       employeeSelect: null,
       team: null,
       modalName: 'z-team-modal',
+      modalSize: 'medium',
     };
   },