title: Jetpack Compose - HorizontalPager item spacing/padding for items with max width
body: <p>Using Jetpack Compose and the <a href="https://github.com/google/accompanist" rel="nofollow noreferrer">accompanist</a> pager, I'm trying to create a <a href="https://google.github.io/accompanist/pager/#horizontalpager" rel="nofollow noreferrer"><code>HorizontalPager</code></a> where:</p>
  <ol>
  <li>Edges of items to the left and right of current item are shown</li>
  <li>There is a max width to the <code>Pager</code> items</li>
  </ol>
  <p>As an example, I wrote the following code (for simplicities sake, I made <code>Text</code> items, but in reality, I'm actually making more complex <code>Card</code> items):</p>
  <pre><code>@Composable
  fun MyText(modifier: Modifier) {
    Text(
      text = LOREM_IPSUM_TEXT,
      modifier = modifier
        .wrapContentHeight()
        .border(BorderStroke(1.dp, Color.Red))
    )
  }
  
  @ExperimentalPagerApi
  @Composable
  fun MyPager(pagerItem: @Composable () -&gt; Unit = {}) {
    Scaffold {
      Column(
        modifier = Modifier
          .fillMaxSize()
          // In case items in the VP are taller than the screen -&gt; scrollable
          .verticalScroll(rememberScrollState())
      ) {
        HorizontalPager(
          contentPadding = PaddingValues(32.dp),
          itemSpacing = 16.dp,
          count = 3,
        ) {
          pagerItem()
        }
      }
    }
  }
  
  @ExperimentalPagerApi
  @Preview
  @Composable
  fun MyPager_200dpWidth() {
    MyPager { MyText(modifier = Modifier.widthIn(max = 200.dp)) }
  }
  
  @ExperimentalPagerApi
  @Preview
  @Composable
  fun MyPager_500dpWidth() {
    MyPager { MyText(modifier = Modifier.widthIn(max = 500.dp)) }
  }
  
  @ExperimentalPagerApi
  @Preview
  @Composable
  fun MyPager_FillMaxWidth() {
    MyPager { MyText(modifier = Modifier.fillMaxWidth()) }
  }
  
  </code></pre>
  <p>The issue I'm having is that when I make the item have a max width that seems to be smaller than the screen width (see <code>MyPager_200dpWidth</code>), I no longer see the items on the side anymore. On the other hand, using items with <strong>larger</strong> max widths (See <code>MyPager_500dpWidth</code>) or <code>fillMaxWidth</code> (See <code>MyPager_FillMaxWidth</code>) allows me to see the items on the side.</p>
  <p>It seems weird to me that items with the <strong>smaller</strong> max width are actually taking up more horizontal space than the items with the <strong>larger</strong> max width. This can be shown in the Preview section...</p>
  <p><a href="https://i.stack.imgur.com/2LyFN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2LyFN.png" alt="Preview Comparison" /></a></p>
  <p>See how the images on the left (<code>MyPager_500dpWidth) and middle (</code>MyPager_FillMaxWidth<code>) show the next item, while the image on the right (</code>MyPager_200dpWidth`) takes up the whole screen? Here's another comparison when hovering my mouse over the items to see the skeleton boxes...</p>
  <p><a href="https://i.stack.imgur.com/hOSkn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hOSkn.png" alt="Preview Comparison with skeleton" /></a></p>
  <p>Just wondering if someone could help me figure out how I can solve this use case. Is it possible that there's a bug in Compose?</p>