Will now wrap the dashboard buttons when the screen size runs out. Al… (#330)

* Will now wrap the dashboard buttons when the screen size runs out. Also fixes mobile alignment issue

* fix nesting

* Fix simple liniting issues

Author: gin0115

assets/css/src/admin/_dashboard.scss

@@ -116,10 +116,21 @@
         padding: 12px;
         background: #f0f0f1;
         display: flex;
+        flex-wrap: wrap;
         gap: 10px;
         justify-content: flex-end;
+
         a {
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
             text-decoration: none;
+
+            .dashicons {
+                @media (max-width: 782px) {
+                    margin-top: 8px !important;
+                }
+            }
         }
     }
 }
@@ -267,6 +278,26 @@
             display: block;
         }
     }
+    &-navigation {
+        padding: 12px;
+        background: #f0f0f1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: flex-end;
+
+        a {
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+
+            .dashicons {
+                @media (max-width: 782px) {
+                    margin-top: 8px !important;
+                }
+            }
+        }
+    }
 }
 
 // Link Checks Section
@@ -480,4 +511,4 @@
     &-no-posts {
         margin: 0;
     }
-}
+}

templates/admin/dashboard/widget.php

@@ -152,22 +152,24 @@
 		<?php if ( ! Dashboard_Page::is_current_page() ) : ?>
 		<a href="<?php echo esc_url( Dashboard_Page::get_page_url() ); ?>" class="button">
 			<span class="dashicons dashicons-dashboard" style="margin-top: 3px;"></span>
-			<?php esc_html_e( 'Dashboard', 'internet-archive-wayback-machine-link-fixer' ); ?>
+			<span class="link-text"><?php esc_html_e( 'Dashboard', 'internet-archive-wayback-machine-link-fixer' ); ?></span>
 		</a>
 		<?php endif; ?>
 		<a href="<?php echo esc_url( $iawmlf_link_to_settings ); ?>" class="button">
 			<span class="dashicons dashicons-admin-settings" style="margin-top: 3px;"></span>
-			<?php esc_html_e( 'Advanced Settings', 'internet-archive-wayback-machine-link-fixer' ); ?>
+			<span class="link-text"><?php esc_html_e( 'Advanced Settings', 'internet-archive-wayback-machine-link-fixer' ); ?></span>
 		</a>
 		<a href="<?php echo esc_url( $iawmlf_link_table ); ?>" class="button">
 			<span class="dashicons dashicons-list-view" style="margin-top: 3px;"></span>
-			<?php
-			printf(
-				/* translators: %d: number of links */
-				esc_html__( 'View Links (%d)', 'internet-archive-wayback-machine-link-fixer' ),
-				absint( $iawmlf_total_link_count )
-			);
-			?>
+			<span class="link-text">
+				<?php
+				printf(
+					/* translators: %d: number of links */
+					esc_html__( 'View Links (%d)', 'internet-archive-wayback-machine-link-fixer' ),
+					absint( $iawmlf_total_link_count )
+				);
+				?>
+			</span>
 		</a>
 	</div>
 </div>