Resizing Screen with GDX

I’m writing a game using GDX and having some problems rendering shapes correctly when the screen is resized.
When the screen is at the default size the game looks like this -

When I stretch the window a little to the right, it looks like this -

The more I change the window size, the more the shapes are distorted.

The map and sprites resize fine. I’m rendering he sprites through the batch and not setting a projection matrix on it. I’m rendering the map through a TiledMapRenderer.

This is how I’m initializing the renderers

	@Override
	public void create () {
		batch = new SpriteBatch();
		selectorRenderer = new ShapeRenderer();
		healthRenderer = new ShapeRenderer();
		initializeGame();
	}

Here is how I’m creating the camera. I’ve added an override to the resize. I initially didn’t have this or the viewport, but I’ve added those during debugging this issue but I’m getting the same results.

	private void initializeCamera() {
        float w = Gdx.graphics.getWidth();
        float h = Gdx.graphics.getHeight();
        this.screenWidthBase = w;
        this.screenHeightBase = h;
        camera = new OrthographicCamera(w, h);
        viewport = new FillViewport(w, h, camera);
        viewport.apply();
        camera.setToOrtho(false,w,h);
        camera.update();
		selectorRenderer.setProjectionMatrix(camera.combined);
		healthRenderer.setProjectionMatrix(camera.combined);
	}
	
	@Override
   public void resize(int width, int height){
      viewport.update(width,height);
   }

Here is the main logic for the rendering.

	@Override
	public void render () {
		//game logic
		gameLoop();
		
		Gdx.gl.glClearColor(1, 0, 0, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		
		//draw the tile map
        camera.update();
        tiledMapRenderer.setView(camera);
        tiledMapRenderer.render();
        
		batch.begin();
		//elapsed time just goes up, the true param tells it to loop
		elapsedTime += Gdx.graphics.getDeltaTime();
		for(Unit curUnit : units) {
			drawUnit(curUnit);
		}
		batch.end();
		renderSelector();
		//this can probably be structured better so we don't have to loop through units twice
		for(Unit curUnit : units) {
			renderHealth(curUnit);
		}
	}
	
	public void drawUnit(Unit curUnit) {
		batch.draw(curUnit.getCurAnim().getKeyFrame(elapsedTime, true), getDrawPosX(curUnit.getXOffset()), getDrawPosY(curUnit.getYOffset()));
	}
	
	/**
	 * Draw selector
	 */
	private void renderSelector() {
		selectorRenderer.begin(ShapeType.Line);
		//display selected units
		if(selectedUnit != null) {
			if(selectedUnit.getSide() == Side.PLAYER) {
				selectorRenderer.setColor(Color.GREEN);
			} else {
				selectorRenderer.setColor(Color.RED);
			}
			selectorRenderer.rect(getDrawPosX(selectedUnit.getXOffset()), getDrawPosY(selectedUnit.getYOffset()), tileWidth, tileHeight);
			if(selectedUnit.getDestination() != null) {
				selectorRenderer.circle(getDrawPosX(selectedUnit.getFinalDestination().x), getDrawPosY(selectedUnit.getFinalDestination().y), 2);
			}
		}
		//highlight movable nodes
		for(Node curNode : movableNodes) {
			selectorRenderer.rect(getDrawPosX(curNode.getX()*tileWidth), getDrawPosY(curNode.getY()*tileHeight), tileWidth, tileHeight);
		}
		handleLineOfSight();
		if(devMode) {
			renderDevSelector();
			drawLineOfSight(); 
		}
		selectorRenderer.end();
	}

Anybody know what I’m doing wrong? I’ve been reading up on GDXs camera and Viewports but I’m having a hard time grasping how they work or how to make this work.