/* --- Fix: Ensure full-width alignment and proper wrapping --- */

/* 1. The Gray/White Button Container (Flex Container) */
.issue-item {
  /* Set the display property to Flex */
  display: flex;

  /* Align items vertically in the center */
  align-items: center;

  /* Ensures the container takes full width of its parent */
  width: 100%;

  /* Ensure padding is included in the width */
  box-sizing: border-box;

  /* Add left/right padding to space content from the edges of the box, ensuring alignment */
  padding: 15px 20px;
}

/* 2. The Icon Element (First Flex Item) */
.issue-icon {
  /* Prevent the icon from shrinking */
  flex-shrink: 0;

  /* Add necessary space between the icon and the text */
  margin-right: 15px;
}

/* 3. The Text Wrapper Element (Second Flex Item) */
.issue-text-wrapper {
  /* Allow the text element to take up all available space */
  flex-grow: 1;

  /* Allow the text element to shrink */
  flex-shrink: 1;

  /* *** THE CRITICAL FIX for Flexbox overflow: *** */
  /* This allows the long text to wrap rather than maintaining its natural length. */
  min-width: 0;

  /* Ensure the text wraps onto multiple lines */
  white-space: normal;
}