feat(ui): update medication icons alignment and styling for improved mobile display

frontend/src/styles.css

@@ -829,11 +829,13 @@ textarea {
   .table-row .cell-with-avatar .med-avatar {
     flex-shrink: 0;
   }
-  /* Icons on separate line on mobile - aligned left under med name */
+  /* Icons on separate line on mobile - centered under med name */
   .table-row .cell-with-avatar .med-icons {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
+    width: 100%;
   }
   /* Badges and icons wrap to next line if needed but stay together */
   .table-row .taken-by-badge,
@@ -1878,8 +1880,9 @@ textarea {
 /* Table/Timeline cells with avatar */
 .cell-with-avatar {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .cell-with-avatar .med-name-line {
@@ -1891,13 +1894,8 @@ textarea {
 .cell-with-avatar .med-icons {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
   font-size: 1rem;
-  width: 100%;
-  border: none !important;
-  border-top: none !important;
-  border-bottom: none !important;
 }
 
 .cell-with-avatar .med-icons span {
@@ -1987,7 +1985,6 @@ textarea {
   justify-content: center;
   z-index: 1000;
   padding: 2rem 1rem;
-  overflow-y: auto;
   animation: fadeIn 0.2s ease;
 }
 
@@ -3109,8 +3106,6 @@ h3 .reminder-icon.info-tooltip {
 .share-dialog-modal {
   max-width: 480px;
   padding: 1.5rem;
-  margin-top: 0;
-  align-self: flex-start;
 }
 
 .share-dialog-header {